[css] How do I center align horizontal <UL> menu?

I need to center align a horizontal menu.
I've tried various solutions, including the mix of inline-block / block / center-align etc., but haven't succeeded.

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 need Javascript to accomplish this?

Demo - http://codepen.io/grantex/pen/InLmJ

<div class="navigation">
    <ul>
        <li><a href="">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Contact</a></li>
        <li><a href="">Menu</a></li>
        <li><a href="">Others</a></li>
    </ul>
</div>


.navigation {
    max-width: 700px;
    margin: 0 auto;
}
.navigation ul {
    list-style: none;
    display: table;
    width: 100%;
}
.navigation ul li {
    display: table-cell;
    text-align: center;
}
.navigation ul li a {
    padding: 5px 10px;
    width: 100%;
}

Omg so much cleaner.

ul{margin-left:33%}

Is a decent approximation on big screens. Its not good, but a good dirty fix.

With CSS3 flexbox. Simple.

ul {
  display: flex;
  justify-content: center;
}

ul li {
  padding: 0 8px;
}

div {
     text-align: center;
}
div ul {
     display: inline-table;
}

ul as inline-table fixes the with issue. I used the parent div to align the text to center. this way it looks good even in other languages (translation, different width)

I used the display:inline-block property: the solution consist in use a wrapper with fixed width. Inside, the ul block with the inline-block for display. Using this, the ul just take the width for the real content! and finally margin: 0 auto, to center this inline-block =)

/*ul wrapper*/
.gallery_wrapper{
        width:          958px;
        margin:         0 auto;
  }
/*ul list*/
ul.gallery_carrousel{
        display:        inline-block;
        margin:         0 auto;
}
.contenido_secundario li{
        float:          left;
}

@Robusto's solution was the simplest for what I was trying to do, I suggest you use it. I was trying to do the same thing for images in an unordered list to make a gallery... I made a js fiddle to fool around with it. Feel free to try it here.

[it was set up using robusto's sample code]
HTML:

<div id="centerDiv">
    <ul class="centerUL">
        <li><a href="http://www.amazon.com"><img src="http://placehold.it/200x150>         </a>&nbsp;&nbsp;</li>
        <li><a href="http://www.amazon.com"><img src="http://placehold.it/200x150"></a>&nbsp;&nbsp;</li>
        <li><a href="http://www.amazon.com"><img src="http://placehold.it/200x150"></a></li>
    </ul>
</div>

CSS:

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

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

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

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

Try this:

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

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 (".").

Here's a good article on how to do it in a pretty rock-solid way, without any hacks and full cross-browser support. Works for me:

--> http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

.topmenu-design
{
    display: inline-table;
}

That all!

i use jquery code for this. (Alternative solution)

    $(document).ready(function() { 
       var margin = $(".topmenu-design").width()-$("#topmenu").width();
       $("#topmenu").css('margin-left',margin/2);
    });

This is the simplest way I found. I used your html. The padding is just to reset browser defaults.

ul {_x000D_
  text-align: center;_x000D_
  padding: 0;_x000D_
}_x000D_
li {_x000D_
  display: inline-block;_x000D_
}

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

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;
}

Like so many of you, I've been struggling with this for a while. The solution ultimately had to do with the div containing the UL. All suggestions on altering padding, width, etc. of the UL had no effect, but the following did.

It's all about the margin:0 auto; on the containing div. I hope this helps some people, and thanks to everyone else who already suggested this in combination with other things.

.divNav
{
    width: 99%;
    text-align:center;
    margin:0 auto; 
}

.divNav ul
{ 
    display:inline-block; 
    list-style:none;
    zoom: 1;
}

.divNav ul li 
{
    float:left;
    margin-right: .8em;       
    padding: 0; 
}

.divNav a,  #divNav a:visited
{
    width: 7.5em;
    display: block; 
    border: 1px solid #000;
    border-bottom:none;
    padding: 5px; 
    background-color:#F90;
    text-decoration: none;
    color:#FFF;
    text-align: center;
    font-family:Verdana, Geneva, sans-serif;
    font-size:1em;
}