How to center a list

Learn how to center a list using CSS.

centered list

wrap the <ul> elements inside the container element, for example <div>:

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

wrap the <div> align the <li> elements to the center, and <ul> change the display to inline-block.

Or, 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;
{}