Comment centrer les onglets Twitter bootstrap sur la page?

Question

Je suis en utilisant twitter bootstrap pour créer togglable onglets. Voici le css que j'utilise:

<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>

Cette page affiche les onglets correctement, mais tiré vers la gauche (qui est ce qui est censé arriver). J'ai essayé de bricoler avec le CSS pour obtenir les onglets pour centrer sur la page, mais pas de chance encore. Je pensais que quelqu'un avec plus de css à l'expérience de savoir comment le faire.

Comme une note, il est une autre question à propos de centrage nav pilules, j'ai essayé, mais il ne fonctionne pas avec tout simplement nav onglets.

Merci.

Answer 1

nav-tabs les éléments de la liste sont automatiquement flottait à la gauche par le bootstrap, donc vous devez les réinitialiser et au lieu de les afficher en tant que inline-block, et au centre les éléments de menu, nous devons ajouter l'attribut de l' text-align:center pour le conteneur, comme suit:

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;
}

Démo: http://jsfiddle.net/U8HGz/2/show/ Edit ici: http://jsfiddle.net/U8HGz/2/

---

Edit: la version corrigée qui travaille dans IE7+ fournie par l'utilisateur @Mon Mal à la Tête en bas dans les commentaires ci-dessous.

Démo: http://jsfiddle.net/U8HGz/3/show/ Edit ici: http://jsfiddle.net/U8HGz/3/

Answer 2

Ajoutant simplement

 margin-left:50%;
 

quand j'ai mis mes onglets, a travaillé pour moi.

Par exemple

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

Answer 3

Je n'ai pas essayé cela, mais ça devrait marcher:

 .nav-tabs {
    display: block;
    margin-left: auto;
    margin-right: auto;
}