Center LI elements in a CSS menu in IE?

Question

I need to center a CSS menu that has an unknown width. I found a solution. By setting the UL tag to display:table or display:inline-table the LI elements can be aligned in the center.

This solution did not work in IE. Is there another solution that will work in IE, with only HTML / CSS?

If you want a good look at my code i've pasted it here.

Answer 1

How about this? Works for me on IE6, IE7, Firefox.

Markup:

<div id='menu-centered'>
    <ul>
        <li><a href="">My first item</a></li>
        <li><a href="">My second item</a></li>
        <li><a href="">My third item</a></li>
        <li><a href="">My fourth item</a></li>
        <li><a href="">My fifth item</a></li>
    </ul>
</div>

CSS:

#menu-centered {
    background-color: #0075B8;
    padding: 10px;
    margin: 0;
}

#menu-centered ul {
    text-align: center;
    padding: 0;
    margin: 0;
}

#menu-centered li {
    display: inline;
    list-style: none;
    padding: 10px 5px 10px 5px;
}

#menu-centered a {
    font: normal 12px Arial;
    color: #fff;
    text-decoration: none;
    padding: 5px;
    background: #57a8d6;
}

#menu-centered a:hover {
    background: #5fb8eb;
}

The key to the whole thing was basically doing text-align: center; on the <ul> element. You also never really want to do stuff like display: table; - it's just hackish and as you found out doesn't work on all browsers. Since this way avoids floating you also don't need to have the clear element in there, although you could have removed that anyways by adding overflow: auto; to the <ul>. Hope it helps.