Saltar al contenido
Codifíca.me | Desarrollo web | Programación

Centrar el menú de navegación | ul tabs con CSS

28 junio, 2019

Centrar el menú con listas ul tabs con CSS

Si existe un factor común en cualquier proyecto web ese es el menú de navegación, todos o casi todos llevan un menú de navegación. Por lo que he subido un minituto para hacer un menú y centrarlo en la página web, todo maquetador web sabe como crear menús de navegación utilizando listas y CSS, pero luego es un poquito más difícil encontrar la manera de alinearlos al centro.

Crear el menú es sencillísimo. Primero creamos la estructura:

Código del menú:

<ul class="tabs">
   <li rel="tab1" class="active">Los más vendidos</li>
   <li rel="tab2">Novedades</li>
   <li rel="tab3">Ofertas</li>
   <li rel="tab4">Packs</li>
</ul>

Después a través de CSS suprimimos los estilos de lista, y hacemos que los elementos
floten en el centro.

De qué manera centrar el menú

¿De qué forma alineamos nuestro menú al centro si el ancho del mismo es variable? Tan simple como agregar cuatro líneas:

Esta sería el código en SCSS:

ul.tabs {
    text-align: center;
    li {
        float: none !important;
        display: inline-block;
    }
}

Este sería el código en CSS:

 
ul.tabs {
    text-align: center;
}
 
ul.tabs li {
    float: none !important;
    display: inline-block;
}

Ejemplo del código