how do I get the bullet points of a <ul> to center with the text?

Question

When I try to center a <ul> the text in the <li> centers but the bullet points stay on the far left of the page. Is there any way to get the bullet points to stay with the text when it is centered?

#abc{text-align: center; }  <div id="section1"> <div id="abc"> <ul> <li>one</li> <li>two</li> <li>three</li> </ul> <div/> <div/> 

Answer 1

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>

Answer 2

You can do that with list-style-position: inside; on the ul element :

ul {     list-style-position: inside; } 

See working fiddle