Modificación de la barra de navegación Bootstrap de Twitter para centrar los enlaces

Al trabajar con la barra de navegación Bootstrap de Twitter, los usuarios pueden encontrar la necesidad de alinear los enlaces de navegación centralmente, en lugar de la alineación izquierda predeterminada . Para lograr esto, realice las siguientes personalizaciones usando la hoja de estilos CSS.

Solución

Para centrar los enlaces de navegación en la barra de navegación, implemente el siguiente código CSS:

.navbar .nav,
.navbar .nav > li {
    float: none;
    display: inline-block;
    *display: inline; /* ie7 fix */
    *zoom: 1; /* hasLayout ie7 trigger */
    vertical-align: top;
}

.navbar-inner {
    text-align: center;
}

Enfoque alternativo

Para conservar los valores predeterminados de Bootstrap y apuntar a un menú de barra de navegación específico, cree una clase personalizada y aplíquela al contenedor de la barra de navegación:

    

        ....
    

Luego, seleccione la clase .center en la hoja de estilos CSS:

.center.navbar .nav,
.center.navbar .nav > li {
    float: none;
    display: inline-block;
    *display: inline; /* ie7 fix */
    *zoom: 1; /* hasLayout ie7 trigger */
    vertical-align: top;
}

.center .navbar-inner {
    text-align: center;
}

Consideraciones adicionales

Para alinear los elementos del submenú a la izquierda, agregue la siguiente regla CSS:

.center .dropdown-menu {
    text-align: left;
}