Como centralizo as guias de bootstrap do Twitter na página?

Estou usando o bootstrap do Twitter para criar guias alternáveis. Aqui está o css que estou usando:

<div class="container">
  <ul class="nav nav-tabs">
    <li><a href="#home" data-toggle="tab">Home</a></li>
    <li><a href="#profile" data-toggle="tab">Profile</a></li>
    <li><a href="#messages" data-toggle="tab">Messages</a></li>
    <li><a href="#settings" data-toggle="tab">Settings</a></li>
  </ul>
</div>

Este html exibe as abas corretamente, mas puxadas para a esquerda (que é o que deve acontecer). Tentei mexer no CSS para centralizar as guias na página, mas ainda não tive sorte. Achei que alguém com mais experiência em css saberia fazer isso.

Como observação, há outra questão sobre centralizar pílulas de navegação, que tentei, mas não funcionou apenas com guias de navegação simples.

Obrigado.

nav-tabsos itens da lista são automaticamente flutuados para a esquerda pelo bootstrap, então você deve redefinir isso e, em vez disso, exibi-los como inline-block, e para os itens de menu centralizados, temos que adicionar o atributo de text-align:centerao contêiner, assim:

CSS

.nav-tabs > li, .nav-pills > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
     zoom:1; /* hasLayout ie7 trigger */
}

.nav-tabs, .nav-pills {
    text-align:center;
}

Demo: http://jsfiddle.net/U8HGz/2/show/ Edite aqui: http://jsfiddle.net/U8HGz/2/

Edit: versão corrigida que funciona no IE7 + fornecida pelo usuário @My Head Hurts down nos comentários abaixo.

Demo: http://jsfiddle.net/U8HGz/3/show/ Edite aqui: http://jsfiddle.net/U8HGz/3/

A resposta aceita é perfeita. Ele pode ser ainda mais personalizado para que você possa usá-lo lado a lado com as guias padrão alinhadas à esquerda.

.nav-tabs.centered > li, .nav-pills.centered > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
     zoom:1; /* hasLayout ie7 trigger */
}

.nav-tabs.centered, .nav-pills.centered {
    text-align:center;
}

Para usá-lo, adicione a classe "centrada" ao seu elemento tabs

<ul class="nav nav-tabs centered" >
..
</ul>

Adicionar a classe nav-justifiedfunciona para mim. Isso não apenas alinha as guias ao centro, mas também as espalha muito bem na parte superior.

<ul class="nav nav-tabs nav-justified">
    <li><a href="#Page1">Page1</a></li>
    <li><a href="#Page2">Page2</a></li>
    <li><a href="#Page3">Page3</a></li>
    <li><a href="#Page4">Page4</a></li>
  </ul>

Mesmo que a resposta aceita funcione bem, achei a resposta acima mais natural para o Bootstrap.

Simplesmente adicionando

margin-left:50%;

quando configurei minhas guias, funcionou para mim.

Por exemplo

<ul class="nav nav-tabs" style="margin-left:50%; margin-right:50%;">

Você pode apenas usar a grade de bootstrap para centralizar suas abas de navegação. Como a grade bootstrap é dividida em 12 colunas iguais, você pode usar facilmente 4 colunas para sua navegação com deslocamento de 4 colunas:

<div class="col-sm-4 col-sm-offset-4">.

Portanto você está obtendo sua navegação no meio da página (solução também responsiva) com 4 colunas livres à esquerda e à direita.

Achei o grid muito útil para fazer páginas da web responsivas. Boa sorte!

<div class="row-fluid">
  <div class="col-sm-12">
    <div class="col-sm-4 col-sm-offset-4">
      <ul class="nav nav-tabs">
        <li><a href="#home" data-toggle="tab">Home</a></li>
        <li><a href="#profile" data-toggle="tab">Profile</a></li>
        <li><a href="#messages" data-toggle="tab">Messages</a></li>
        <li><a href="#settings" data-toggle="tab">Settings</a></li>
      </ul>
    </div>
  </div>
</div>

se você usar bs4 simplesmente, você pode adicionar justify-content-centerclasse às suas guias de navegação para centralizá-la na página. se você deseja que suas abas sejam justificadas (full-with), adicione nav-justifiedclasse a ela; neste caso, se você tiver 3 itens em seu nav, cada um deles tem 33% com. se houver 5 itens, cada um terá 20% com.

outra maneira é simplesmente adicionar text-centerse você estiver usando bs3 .

‌O próprio bootstrap tem uma classe chamada nav-justified. Basta adicioná-lo assim:

<ul class="nav nav-tabs nav-justified">

Se você deseja alinhar o conteúdo central <li>também, faça o seu disply: inline-block.

Experimente isto:

<ul class="nav nav-tabs justify-content-center">