CSS text-align not working

Question

I have this css code here

.navigation{
    width:100%;
    background-color:#7a7a7a;
    font-size:18px;
}

.navigation ul {
    list-style-type: none;
    margin: 0;
}

.navigation li {
    float: left;
}


.navigation ul a {
    color: #ffffff;
    display: block;
    padding: 0 65px 0 0;
    text-decoration: none;
}

What I am trying to do is center my class navigation. I tried using text-align:center; and vertical-align:middle; but neither of them worked.

and here is the HTML Code

<div class="navigation">
<ul>
<li><a href="http://surfthecurve.ca/">home</a></li>
<li><a href="http://surfthecurve.ca/?page_id=7">about</a></li>
<li><a href="http://surfthecurve.ca/?page_id=9">tutors</a></li>
<li><a href="http://surfthecurve.ca/?page_id=11">students</a></li>
<li><a href="http://surfthecurve.ca/?page_id=13">contact us</a></li>
</ul>
</div><!--navigation-->

When I say its not working, I mean the text is aligned to the left.

Do you want the entire 5 item navigation centred under the logo? — andyb, Sep 19 '12 at 18:57

score 37 · Accepted Answer · answered Sep 19 '12 at 18:52

37

Change the rule on your <a> element from:

.navigation ul a {
    color: #000;
    display: block;
    padding: 0 65px 0 0;
    text-decoration: none;
}

to

.navigation ul a {
    color: #000;
    display: block;
    padding: 0 65px 0 0;
    text-decoration: none;
    width:100%;
    text-align:center;
}

Just add two new rules (width:100%; and text-align:center;). You need to make the anchor expand to take up the full width of the list item and then text-align center it.

jsFiddle example

answered Sep 19 '12 at 18:52

j08691

204,283
31
260
272

it kinda of works, but its still not centered inside the navigation div, take a look here http://jamessuske.com/surfthecurve/ – user1269625 Sep 19 '12 at 18:56
No problem. For that example I just added two rules to your `
– j08691 Sep 19 '12 at 19:06

score 17 · Answer 2 · answered Sep 19 '12 at 18:57

17

You have to make the UL inside the div behave like a block. Try adding

.navigation ul {
     display: inline-block;
}

answered Sep 19 '12 at 18:57

madth3

7,275
12
50
74

score 4 · Answer 3 · answered Sep 19 '12 at 19:00

I try to avoid floating elements unless the design really needs it. Because you have floated the <li> they are out of normal flow.

If you add .navigation { text-align:center; } and change .navigation li { float: left; } to .navigation li { display: inline-block; } then entire navigation will be centred.

One caveat to this approach is that display: inline-block; is not supported in IE6 and needs a workaround to make it work in IE7.

CSS text-align not working

3 Answers3