How do I center list items inside a UL element?
Solution 1:
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/
Solution 2:
A more modern way is to use flexbox:
ul{
list-style-type:none;
display:flex;
justify-content: center;
}
ul li{
display: list-item;
background: black;
padding: 5px 10px;
color:white;
margin: 0 3px;
}
div{
background: wheat;
}<div>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>