Search code examples
htmlcsshtml-listscentering

center two unrelated ULs horizontally

Is it possible to center two unrelated ULs side by side horizontally?

I have this code:

<div id="container">
    <ul id="list1">
        <li></li>
        <li></li>
        ...
        <li></li>
    </ul>
    <ul id="list2">
        <li></li>
        <li></li>
        ...
        <li></li>
    </ul>
</div>

I've tried the "left: 50%" and then "right: 50%" CSS trick with no success.

#container { position: relative; left: 50%; }
#container ul { float: left; position: relative; right: 50%; }

Any ideas?

Solution

  • Probably something like this? text-align: center; + display: inline-block;:

    #container {
    ...
    text-align: center;
}

#list1, #list2 {
    ...
    display: inline-block;
}

    Demo: http://jsfiddle.net/N6RUM/