Así es como lo resolví, y también para los menús generados dinámicamente.
Supongamos que este es el menú generado dinámicamente:
<div id="menu">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
y este es el CSS:
.menu {
width:300px;
text-align: center; /*Set a width and text-align on the main div*/
}
.menu ul{
margin:0;
padding:0;
display:inline-block;
list-style: none; /*Set display to inline-block to the ul*/
}
.menu ul li {
float: left;
margin-right: 1.3em; /*this is the usual*/
padding: 0;
}
Ahora, por la lista para estar centrado es necesario agregar un párrafo vacío para borrar la flotador. Puede hacerlo manualmente si el menú es estática o utilizando jQuery
así:
$(document).ready(function() {
$("<p class='clear'></p>").insertAfter('.menu-header ul li:last-child');
})
y el CSS del párrafo .clear
será:
p.clear{
clear:both;
margin:0;
padding:0;
height: 0;
width: 0;
}
y eso es todo!
tengo los que ya están y todavía no es centrada. –
Dado que flotó todos los elementos de la lista, el ul obtiene una altura de cero y un ancho del 100%. – jkelley
Puedes quitar la pantalla: en línea en tu ul, luego haz que tenga un ancho fijo (ancho: 500px) al centro, aunque esto es un poco complicado porque el ul no está configurando correctamente su ancho de caja – jkelley