Centrar menú de ancho variable con CSS

Este tutorial explica cómo centrar menús CSS horizontales de ancho variable basados en listas.

Nivel: Básico.

El menú en con listas

Si existe un elemento común a cualquier proyecto web ese es el menú de navegación. Lo que me empuja a escribir este pequeño tutorial es que, según mi breve experiencia docente, todo maquetador web sabe como crear menús de navegación usando listas y CSS, pero la mayoría no saben cómo alinearlos al centro.

Crear el menú es muy sencillo. Primero creamos la estructura:

Código :

 <nav>
        <ul>
            <li><a href="#">Sección</a></li>
            <li><a href="#">Otra sección</a></li>
            <li><a href="#">La tercera sección</a></li>
            <li><a href="#">Última sección</a></li>
        </ul>
</nav>

Después mediante CSS eliminamos los estilos de lista, y hacemos que los <li> floten a su izquierda:

Código :

<style>
        nav{
            height: auto; /*Junto a overflow: hidden; aplicará a nuestro elemento nav el mismo alto que el más alto de sus elementos hijos */ 
            margin: 0 auto; /* Centro el contenedor */
            overflow: hidden;
            text-align: left;
            width: 960px; /* Defino el ancho de mi página */
        }
        ul{
            float: left;
            list-style-type: none; /* Elimino los estilos de lista */
            padding: 0; 
        }
        li{
            float: left; /* Floto los li para que se dispongan horizontalmente */
        }
        li a{
            padding: 10px; /* El padding añadirá separación entre los elementos */
        }
</style>

Cómo centrar el menú

Cuando definimos la propiedad float del li a left, no sólo ajustamos la disposición a horizontal, sino que además los estamos alineando a la izquierda y al revés con float:right;. Si conocemos el ancho total de los li podríamos ajustar al centro mediante padding en el ul, pero en la mayoría de CMS, donde el número de elementos de un menú puede variar, esta solución obliga a cambiar el css cada vez que añadamos, modifiquemos o suprimamos elementos. ¿Cómo alineamos nuestro menú al centro si el ancho del mismo es variable? Tan fácil como añadir 4 líneas:

Código :

<style>
        ul{
            float: left;
            list-style-type: none;
            padding: 0; 
            /* AÑADIMOS */
            position: relative; 
            left: 50%;
        }
        li{
            float: left;
            /* AÑADIMOS */
            position: relative; 
            right: 50%;
        }
</style>

¿Qué ha pasado?

No. No es brujería.
Primero hemos definido las posiciones del ul y li como relativas. Al indicar la distancia de la izquierda del ul y de la derecha del li estamos colocando nuestros contenedores como muestra la siguiente figura:

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.