align unordered list to the center of the page

Question

I have tried and researched many ways but I couldn't find out how to align unordered list in center. it seems like the bullets are not connected to the text and stay still. here is the html code:

<ul id="facts">
  <li>fact 1</li>
  <li>fact 2</li>
  <li>fact 3</li>
</ul>

and this is the css code:

#facts {
  text-align: center;
}

the result will be like

Answer 1

You can use list-style-position: inside; to set the bullets in front of the text like this:

 #facts { text-align: center; list-style-position: inside; }

 <ul id="facts"> <li>fact 1</li> <li>fact 2</li> <li>fact 3</li> </ul>

Answer 2

You can put your Unordered List in an element with the class of .container and define .container like this:

 .container{ width:100%; display:flex; flex-direction:column; align-items:center; }

 <div class="container"> <ul> <li>Lorem</li> <li>Ipsum</li> <li>Dolor</li> <li>Set</li> </ul> </div>