How TO - Center a List

❮ Previous Next ❯

Learn how to center a list with CSS.

Centered List

  • Coffee
  • Tea
  • Coca Cola

Center an HTML List

Step 1) HTML:

Wrap the <ul> element inside a container element, like <div>:

Example

<div class="container">
  <ul class="myUL">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
  </ul>
</div>
Step 2) Add CSS:

Center-align the <div> element, and change the display of <ul> to inline-block.

Optionally, you can left-align the list items for a more tidy view:

Example

div.container {
  text-align: center;
}

ul.myUL {
  display: inline-block;
  text-align: left;
}
Try it Yourself »

Tip: Go to our CSS Align Tutorial to learn more about aligning elements.


❮ Previous Next ❯
Copyright 1999-2023 by Refsnes Data. All Rights Reserved.