Pinkie Pinkie - 6 months ago 7
CSS Question

How do I center list items inside a UL element?

How do I center list items inside a ul without using extra divs or elements. I have the following. I thought

text-align:center
would do the trick. I can't seem to figure it out.

<style>
ul {
width:100%;
background:red;
height:20px;
text-align:center;
}
li {
display:block;
float:left;
background:blue;
color:white;
margin-right:10px;
}
</style>

<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>


Check jsfiddle http://jsfiddle.net/3Ezx2/1/

Answer

write display:inline-block instead of float:left.

li {
        display:inline-block;
        *display:inline; /*IE7*/
        *zoom:1; /*IE7*/
        background:blue;
        color:white;
        margin-right:10px;
}

http://jsfiddle.net/3Ezx2/3/