Modificando a barra de navegação do Twitter Bootstrap para centralizar links

Ao trabalhar com a barra de navegação do Twitter Bootstrap, os usuários podem encontrar a necessidade de alinhar os links de navegação centralmente, em vez do alinhamento à esquerda padrão . Para conseguir isso, faça as seguintes personalizações usando a folha de estilo CSS.

Solução

Para centralizar os links de navegação na barra de navegação, implemente o seguinte 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;
}

Abordagem alternativa

Para preservar os padrões do Bootstrap e direcionar um menu da barra de navegação específico, crie uma classe personalizada e aplique-a ao contêiner da barra de navegação:

    

        ....
    

Em seguida, direcione a classe .center na folha de estilo 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;
}

Considerações adicionais

Para alinhar os itens do submenu à esquerda, adicione a seguinte regra CSS:

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