Center UL Using CSS Example

Have you wondered how to Center ul using pure CSS? Read on to find out how to do this using only few lines of CSS code.

How to Center ul using CSS

For this example, assume that we have an unordered list in a div container. The unordered list can contain as many list items as you want. That said, let’s look the code for the example.

Example: Centering unordered list in a div using CSS

<style type="text/css">
.container {
text-align: center;
}
.container ul {
display: inline-block;
margin: 0;
padding: 0;
/*IE Fix*/
zoom:1;
*display: inline;
}
.container li {
float: left;
padding: 5px 5px;
}
</style>

<div class="container">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>

That’s it!

If you know of any other ways to center a ul in a div using CSS, please feel free to share by leaving a comment below.