CSS Text Align Not Working With LIs

Question

I've got a set of li's containing text which I would like to be displayed and centered horizontally within their ul with CSS. I can't seem to get this to work, another answer suggested using display:inline but this did nothing.

Here's the code:

header li {
    margin-left:20px;
    margin-right:0px;
    border-left:1px #FFF solid ;
    float:left;
    color:#FFF;
    padding:2px 2px 2px 2px;
    margin-bottom:10px;
    text-align:center;
}

header ul {
    width:321px;
    margin-left:auto;
    margin-right:auto;
    background:url(repeatback.png);
    height:30px;
}

requested html:

<ul>
    <li>About</li>
    <li>Portfolio</li>
    <li>Resume</li>
    <li>Links</li>
    <li>Twitzar</li>
</ul>

Answer 1

See this jsFiddle. In my solution, you do not need a width for each li. Rather, I used text-align: center on the container ul, made each li display: inline, and changed the margins and padding so that the borders appear correctly.

Answer 2

I'm assuming you want to have your text centered within the list item? You need to specify a width on the element for text-align: center to work correctly.

For an example refer to this fiddle: http://jsfiddle.net/sUxnK/1

Note, that the css was tweaked slightly to show the centered text.

<div id="header">
    <ul>
        <li>About</li>
        <li>Portfolio</li>
        <li>Resume</li>
        <li>Links</li>
        <li>Twitzar</li>
    </ul>
</div>

#header ul {
    width:700px;
    margin: 0px auto;
    height: 30px;
}

#header li{
    margin: 0px 0px 10px 20px;
    border: 1px dotted #ccc;
    float:left;
    padding:2px;
    width: 100px;
    text-align:center;
}