How TO - Center a List

Learn how to center a list with CSS.

Centered List

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

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

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:

div.container {
text-align: center;
}

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

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