Add list-style-position: inside
to the ul
element. (example)
The default value for the list-style-position
property is outside
.
ul {
text-align: center;
list-style-position: inside;
}
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
Another option (which yields slightly different results) would be to center the entire ul
element:
.parent {
text-align: center;
}
.parent > ul {
display: inline-block;
}
<div class="parent">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>