How to center a list

Learn how to center a list using CSS.

centered list

  • Coffee
  • Tea
  • Cola

center the HTML list

Step 1 - Add HTML:

to <ul> elements wrapped in a container element, for example <div>:

<div class="container">
  <ul class="myUL">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Cola</li>
  </ul>
</div>

Step 2 - Add CSS:

to <div> elements centered, and set <ul> change the display to inline-block.

of course, you can align the list items to the left for a cleaner view:

div.container {
  text-align: center;
{}
ul.myUL {
  display: inline-block;
  text-align: left;
{}

Try it yourself

Related pages

Tutorial:CSS alignment