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