¿Cómo puedo centrar el menú horizontal?

Necesito centrar un menú horizontal.
He probado varias soluciones, incluyendo la mezcla de inline-block / block / center-align etc., pero no lo he conseguido.

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>

ACTUALIZACIÓN

Sé cómo alinear al centro el ul dentro del div. Eso se puede lograr con la sugerencia de Sarfraz. Pero los elementos de la lista siguen flotando a la izquierda dentro del ul.

¿Necesito Javascript para lograr esto?

Saurav Rastogi
Pregunta editada 1º diciembre 2016 в 3:48
Programación
xhtml css menuitem
19º mayo 2010 в 12:21
7 vistas

Esto me funciona. Si no he malinterpretado tu pregunta, podrías probarlo.

Comienza el snippet: js hide: false -->

    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>  </li>
        <li><a href="http://www.amazon.com">Amazon 2</a>  </li>
        <li><a href="http://www.amazon.com">Amazon 3</a></li>
    </ul>
</div>

...fin del fragmento..;

Robusto
Respuesta editada 25º abril 2016 в 2:02
Comentarios (8)

Prueba esto:

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

Hazlo así:

   <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;
}
Comentarios (1)