¿Cómo centro alinear el menú horizontal <UL>?

Necesito centrar alinear un menú horizontal.
He probado varias soluciones, incluida la combinación de inline-block/ block/ center-alignetc., pero no he tenido éxito.

Aquí está mi código:

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

ACTUALIZAR

Sé centrar la alineación uldentro de div. Eso se puede lograr utilizando la sugerencia de Sarfraz. Pero los elementos de la lista siguen flotando a la izquierda dentro de ul.

¿Necesito Javascript para lograr esto?

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

La premisa es simple y básicamente involucra un envoltorio flotante sin ancho que flota a la izquierda y luego se desplaza fuera de la pantalla a la posición de ancho izquierdo: relativo; izquierda: -50%. A continuación, el elemento interno anidado se invierte y se aplica una posición relativa de + 50%. Esto tiene el efecto de colocar el elemento muerto en el centro. El posicionamiento relativo mantiene el flujo y permite que otro contenido fluya debajo.

Código

#buttons{
    float:right;
    position:relative;
    left:-50%;
    text-align:left;
}
#buttons ul{
    list-style:none;
    position:relative;
    left:50%;
}

#buttons li{float:left;position:relative;}/* ie needs position:relative here*/

#buttons a{
    text-decoration:none;
    margin:10px;
    background:red;
    float:left;
    border:2px outset blue;
    color:#fff;
    padding:2px 5px;
    text-align:center;
    white-space:nowrap;
}
#buttons a:hover{ border:2px inset blue;color:red;background:#f2f2f2;}
#content{overflow:hidden}/* hide horizontal scrollbar*/

<div id="buttons">
    <ul>
        <li><a href="#">Button 1</a></li>
        <li><a href="#">Button 2's a bit longer</a></li>
        <li><a href="#">Butt 3</a></li>
        <li><a href="#">Button 4</a></li>
    </ul>
</div>

Esto funciona para mi. Si no he interpretado mal su pregunta, puede intentarlo.

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

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

Con CSS3 flexbox. Sencillo.

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

ul li {
  padding: 0 8px;
}

Esta es la forma más simple que encontré. Usé tu html. El relleno es solo para restablecer los valores predeterminados del navegador.

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

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

Aquí hay un buen artículo sobre cómo hacerlo de una manera bastante sólida, sin ningún truco y soporte completo para todos los navegadores. Funciona para mi:

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

Prueba esto:

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

Hazlo asi :

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

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

Como muchos de ustedes, he estado luchando con esto por un tiempo. La solución finalmente tuvo que ver con el div que contiene el UL. Todas las sugerencias sobre la alteración del relleno, el ancho, etc. de la UL no tuvieron efecto, pero lo siguiente sí.

Se trata de la margin:0 auto;en el div que contiene. Espero que esto ayude a algunas personas, y gracias a todos los que ya sugirieron esto en combinación con otras cosas.

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

Demostración: 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 mucho más limpio.

En general, la forma de centrar un elemento de nivel negro (como a <ul>) es usar la margin:auto;propiedad.

Para alinear texto y elementos de nivel en línea dentro de un elemento de nivel de bloque, utilice text-align:center;. Entonces todos juntos algo así como ...

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 */
}

... Deberia trabajar.

El caso marginal es Internet Explorer6 ... o incluso otros IEs cuando no se usa a <!DOCTYPE>. IE6 alinea incorrectamente los elementos de nivel de bloque usando text-align. Entonces, si está buscando admitir IE6 (o no está usando a <!DOCTYPE>) su solución completa es ...

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 */
}

Como nota al pie, creo que id="topmenu firstlevel"no es válido ya que un idatributo no puede contener espacios ...? De hecho, la recomendación w3c define el idatributo como un tipo de 'nombre' ...

Los tokens ID y NAME deben comenzar con una letra ([A-Za-z]) y pueden ir seguidos de cualquier número de letras, dígitos ([0-9]), guiones ("-"), guiones bajos ("_") , dos puntos (":") y puntos (".").

Usé la propiedad display: inline-block: la solución consiste en usar un contenedor con ancho fijo. En el interior, el bloque ul con el bloque en línea para la visualización. Usando esto, ¡el ul solo toma el ancho para el contenido real! y finalmente margen: 0 automático, para centrar este bloque en línea =)

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

Yo uso el código jquery para esto. (Solución alternativa)

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

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

ul como tabla en línea corrige el problema con. Utilicé el div principal para alinear el texto al centro. de esta manera se ve bien incluso en otros idiomas (traducción, ancho diferente)

La solución de @ Robusto fue la más simple para lo que estaba tratando de hacer, le sugiero que la use. Estaba tratando de hacer lo mismo para las imágenes en una lista desordenada para hacer una galería ... Hice un js violín para perder el tiempo con ella. Siéntase libre de probarlo aquí.

[se configuró usando el código de muestra de robusto]
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;
}

ul{margin-left:33%}

Es una aproximación decente en pantallas grandes. No es bueno, pero una buena solución sucia.

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

¡Que todos!