Actualización de abril de 2013: Este artículo es bastante antiguo. No es muy difícil. Simplemente proporcione el texto centrado en la lista (p. Ej. ul.nav { text-align: center; }) y los elementos de la lista en bloque en línea (p. ej. ul.nav li { display: inline-block; }). Si desea hacerlo con margen por cualquier motivo, consulte width: fit-content;.
El estándar actual en la codificación de menús son listas desordenadas. No es tan semántico como un <nav> etiqueta sería, pero no es tan malo. La navegación es, después de todo, una lista de tipos.
Si desea hacer esta lista de navegación desordenada horizontal, tienes básicamente dos opciones:
- Haz los elementos de la lista en línea en lugar del predeterminado cuadra. .li {pantalla: en línea; } Esto no forzará rupturas después de los elementos de la lista y se alinearán horizontalmente en la medida de lo posible.
- Flotador los elementos de la lista. Dado que muy a menudo queremos que los elementos de nuestra lista se muestren como bloques para poder establecer anchos fijos en ellos, nos vemos obligados a flotarlos hacia la izquierda o hacia la derecha para alinearlos horizontalmente.
Ahora tomemos un par de decisiones comunes sobre cómo queremos mostrar este menú:
- Queremos que el menú esté centrado. No importa si el menú está en un entorno de ancho fijo o fluido, solo queremos que los elementos del menú estén centrados en el elemento principal
- El menú será una barra horizontal, por lo que queremos asegurarnos de que la barra se vea visualmente como una barra. Nos gustaría utilizar una imagen de fondo repetida para esto.
Ahora estamos en problemas. El <ul> por sí misma no puede estar a cargo de la imagen de fondo, porque solo será tan ancha como sea necesario para ayudar con el centrado. Así que lo ponemos dentro de un div al 100% de ancho para cuidar la imagen de fondo. Pero ahora nuestro pequeño truco de centrado no funciona. Para ser honesto, no estoy exactamente seguro de por qué, pero aplicar .ul {margin: 0 auto;} simplemente no funciona aquí. Aquí es donde entra el truco …
Envuelva la lista dentro de una tabla div
Si envolvemos el menú en un div de “tabla”, podemos resolver esto. Si está familiarizado con Stu Nicholls de CSSPlay, lo usa todo el tiempo en sus increíbles menús horizontales. Mira el HTML:
<div id="menu-outer">
<div class="table">
<ul id="horizontal-list">
<li><a href="https://css-tricks.com/centering-list-items-horizontally-slightly-trickier-than-you-might-think/#"><img src="images/list-item-1.gif" alt="list item 1" /></a></li>
<li><a href="https://css-tricks.com/centering-list-items-horizontally-slightly-trickier-than-you-might-think/#"><img src="images/list-item-2.gif" alt="list item 2" /></a></li>
<li><a href="https://css-tricks.com/centering-list-items-horizontally-slightly-trickier-than-you-might-think/#"><img src="images/list-item-3.gif" alt="list item 3" /></a></li>
<li><a href="https://css-tricks.com/centering-list-items-horizontally-slightly-trickier-than-you-might-think/#"><img src="images/list-item-4.gif" alt="list item 4" /></a></li>
</ul>
</div>
</div>Ahora vea el CSS muy simple que lo hace posible:
#menu-outer {
height: 84px;
background: url(images/bar-bg.jpg) repeat-x;
}
.table {
display: table; /* Allow the centering to work */
margin: 0 auto;
}
ul#horizontal-list {
min-width: 696px;
list-style: none;
padding-top: 20px;
}
ul#horizontal-list li {
display: inline;
}Es la tabla div la que hace el trabajo. Algunos días pienso “Lo que sea que funcione”. debería ser el lema de CSS.
Ver demostración Descargar archivos