Si8 Si8 - 3 days ago 5
CSS Question

How to horizontally align ul to center of div?

I am trying to center a

<ul>
inside a
<div>
. I tried the following

text-align: center;


and

left: 50%;


This is not working.

CSS:

.container {
clear: both;
width: 800px;
height: 70px;
margin-bottom: 10px;
text-align: center;
}

.container ul {
padding: 0 0 0 20px;
margin: 0;
list-style: none;
}

.container ul li {
margin: 0;
padding: 0;
}


I want the
ul
to be centered inside the container.

Answer

IE7+: max-width: 660px and margin: auto

You can center a block-level element by assigning a fixed width and margin-right and -left set to auto.

.container ul {
    /* for IE below version 7 use `width` instead of `max-width` */
    max-width: 660px;
    margin-right: auto;
}

Notes:

  • No container needed
Comments