How do I center align horizontal <UL> menu?

Question

I need to centre align a horizontal menu.
I've tried various solutions, including the mix of inline-block / block / center-align etc., but not being successful.

Can someone help me please? :)

Here is my code:

<div class="topmenu-design">
    <!-- Top menu content: START -->
    <ul id="topmenu firstlevel">                                                                                       
      <li class="firstli" id="node_id_64"><div><a href="#"><span>Om kampanjen</span></a></div></li>
      <li id="node_id_65"><div><a href="#"><span>Fakta om inneklima</span></a></div></li>
      <li class="lastli" id="node_id_66"><div><a href="#"><span>Statistikk</span></a></div></li>
    </ul>
    <!-- Top menu content: END -->
</div>

UPDATE

I know how to center align the UL within the DIV. That can be accomplished using Sarfraz's suggestion. But the list items are still floated left within the UL.

Do I smell javascript to accomplish this?

Answer 1

Try this:

div.topmenu-design ul
{
  display:block;
  width:600px; /* or whatever width value */
  margin:0px auto;
}

Answer 2

This works for me. If I haven't misconstrued your question, you might give it a try.

<div id="centerDiv">
    <ul class="centerUL">
        <li><a href="http://www.amazon.com"&gt;Amazon 1</a>&nbsp;&nbsp;</li>
        <li><a href="http://www.amazon.com"&gt;Amazon 2</a>&nbsp;&nbsp;</li>
        <li><a href="http://www.amazon.com"&gt;Amazon 3</a></li>
    </ul>
</div>

with the CSS as:

    div#centerDiv {
        width: 600px;
        text-align: center;
        border: 1px solid red;
    }
    ul.centerUL {
        margin: 2 auto;
        line-height: 1.4;
    }
    .centerUL li {
        display: inline;
        text-align: center;
    }

Answer 3

Do it like this :

   <div id="footer">
        <ul>
            <li><a href="/1.html">Link 1</a></li>
            <li><a href="/2.html">Link 2</a></li>
            <li><a href="/3.html">Link 3</a></li>
            <li><a href="/4.html">Link 4</a></li>
            <li><a href="/5.html">Link 5</a></li>
        </ul>
   </div>

And the CSS:

#footer {
    background-color:#ccc;
    height:39px;
    line-height:36px;
    margin:0 auto;
    text-align:center;
    width:950px;
}

#footer ul li {
    display:inline;
    font-family:Arial,sans-serif;
    font-size:1em;
    padding:0 2px;
    text-decoration:none;
}

Answer 4

Generally speaking the way to center a black level element (like a <ul>) is using the margin:auto; property.

To align text and inline level elements within a block level element use text-align:center;. So all together something like...

ul {
    margin:auto;
}
ul li {
    text-align:center;
    list-style-position:inside; /* so that the bullet points are also centered */
}
ul li div {
    display:inline; /* so that the bullet points aren't above the content */
}

... should work.

The fringe case is Internet Explorer6... or even other IEs when not using a <!DOCTYPE>. IE6 incorrectly aligns block level elemnts using text-align. So if you're looking to support IE6 (or not using a <!DOCTYPE>) your full solution is...

div.topmenu-design {
    text-align:center;
}
div.topmenu-design ul {
    margin:auto;
}
div.topmenu-design ul li {
    text-align:center;
    list-style-position:inside; /* so that the bullet points are also centered */
}
div.topmenu-design ul li div {
    display:inline; /* so that the bullet points aren't above the content */
}

As a footnote, I think id="topmenu firstlevel" is invalid as an id attribute can't contain spaces... ? Indeed the w3c recommendation defines the id attribute as a 'name' type...

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

Answer 5

http://pmob.co.uk/pob/centred-float.htm