Question

I’m trying to alignt 3 text links – one to the left, one to the center, and one to the right, but they won’t align correctly.

Here’s the html code:

<div class="navi">
    <a href="http://mysite.com/link1/" target="_blank" class="text-left">Link 1</a>
    <a href="http://mysite.com/link2/" target="_blank" class="text-center">Link 2</a>
    <a href="http://mysite.com/link3/" target="_blank" class="text-right">Link 3</a>
 </div>

The relevant CSS is:

.navi {
    width: 100%;    
}

.text-left {
    display: inline
    text-align: left;
}
.text-right {
    display: inline
    text-align: right;
}
.text-center {
    display: inline
    text-align: center;
}

What am I doing wrong?

Thanks!

Answer 1

That’s not how text-alignment works. <a> tags are display:inline by default so you don’t need to assign that value. You also need to assign the text-align to the parent container.

This CSS should do the trick for you:

.text-left {
    float:left;
}

.text-right {
    float:right;
}

.navi {
    text-align:center;
}

Working example