CODEWITHSUNDEEP
htmlcss
ErDevFy
ErDevFy

Reputation: 105

align unordered list to the center of the page

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 this

Upvotes: 0

Views: 102

Answers (2)

Sadra M.
Sadra M.

Reputation: 1542

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>

Upvotes: 1

Sebastian Brosch
Sebastian Brosch

Reputation: 43604

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>

Upvotes: 2

Related Questions