выровнять неупорядоченный список по центру страницы

Question

Я пробовал и исследовал много способов, но не мог найти, как выровнять неупорядоченный список по центру. кажется, что пули не связаны с текстом и остаются неподвижными. вот код html:

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

, а это код css:

#facts {
  text-align: center;
}

результат будет как этот

Answer 1

Вы можете поместить свой Unordered List в элемент с классом .container и определить .container следующим образом:

.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>

Answer 2

Вы можете использовать list-style-position: inside;, чтобы установить маркеры перед текстом следующим образом:

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

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