Center horizontal list style menu

Question

Hi,

I have the following code:

CSS

#main
{
    width:100%;
    height:120px;
    border:solid 1px #efefef;
}

#links
{
    background-color:#808080;
}

#links ul
{
    margin:0px auto;
    padding:0px;
    list-style:none;
    background-color:#eee;
    height:30px;
}

#links ul li
{
    float:left;
    margin:0px;
    list-style:none;
    padding:0px 10px;
}

HTML

<div id="main">
    <div id="links">
        <ul>
            <li>Link 1</li>
            <li>Link 2</li>
            <li>Link 3</li>
            <li>Link 4</li>
            <li>Link 5</li>
            <li>Link 6</li>
        </ul>    
    </div>
</div>

The list items are dynamic so I can't really use fixed width on the #links layer and I want the list to be perfectly centered. The above code doesn't work and I've a variety of methods but can't seem to get the list centered.

I don't want to use a table partly because I hate using tables for menus and also I will have eventually have sub menu items that will also be horizontal.

Any pointers?

Thanks Steve

Answer 1

Here are the possible solutions:

• Centre widthless floats
• Centering Float Left Menus

Answer 2

Add:

text-align:center;

To #links

#links ul sets the left and right margins to auto. Which will make them equal size if the container is told to center its contents. The line above will do that.

Answer 3

Here's something I wrote that may do what you want. Uses jQuery though. http://stackoverflow.com/questions/3848746/evenly-spaced-and-justified-horizontal-list-menu