How do I center list items inside a UL element?
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>li{
display:table;
margin:0px auto 0px auto;
}
This should work.
Looks like all you need is text-align: center; in ul
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;
}