Comment centrer les onglets de bootstrap Twitter sur la page?

J'utilise le bootstrap de Twitter pour créer des onglets basculables. 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>

Ce html affiche correctement les onglets, mais tiré vers la gauche (ce qui est censé se produire). J'ai essayé de bricoler le CSS pour que les onglets soient centrés sur la page, mais pas encore de chance. Je pensais que quelqu'un avec plus d'expérience en CSS saurait comment faire cela.

En guise de note, il y a une autre question sur le centrage des pilules de navigation, que j'ai essayé, mais cela ne fonctionnait pas avec des onglets de navigation simples.

Merci.

nav-tabsLes éléments de liste sont automatiquement déplacés vers la gauche par le bootstrap, vous devez donc le réinitialiser et les afficher à la place comme inline-block, et pour centrer les éléments de menu, nous devons ajouter l'attribut de text-align:centerau conteneur, comme ceci:

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/ Modifiez ici: http://jsfiddle.net/U8HGz/2/

Edit: version corrigée qui fonctionne dans IE7 + fournie par l'utilisateur @My Head Hurts down dans les commentaires ci-dessous.

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

La réponse acceptée est parfaite. Il peut être davantage personnalisé afin que vous puissiez l'utiliser côte à côte avec les onglets standard alignés à gauche.

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

Pour l'utiliser, ajoutez une classe "centrée" à votre élément tabs

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

L'ajout de la classe nav-justifiedfonctionne pour moi. Ce centre aligne non seulement les onglets, mais il les répartit également bien en haut.

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

Même si la réponse acceptée fonctionne bien, j'ai trouvé ce qui précède plus naturel pour Bootstrap.

Ajouter simplement

margin-left:50%;

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

Pour par exemple

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

Vous pouvez simplement utiliser la grille bootstrap pour centrer vos onglets de navigation. Puisque la grille de bootstrap est divisée sur 12 colonnes égales, vous pouvez facilement utiliser 4 colonnes pour votre navigation avec un décalage de 4 colonnes:

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

Par conséquent, vous obtenez votre navigation au milieu de la page (également une solution réactive) avec 4 colonnes libres à gauche et à droite.

J'ai trouvé la grille vraiment utile pour créer des pages Web réactives. Bonne chance!

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

si vous utilisez simplement bs4, vous pouvez ajouter une justify-content-centerclasse à vos onglets de navigation pour la centrer sur la page. si vous voulez que vos onglets soient justifiés (avec) ajouteznav-justified classe, dans ce cas, si vous avez 3 éléments dans votre navigation, chacun d'eux a 33% avec. si 5 éléments sont là, chacun a 20% avec.

une autre façon est simplement d'ajouter text-centersi vous utilisez bs3 .

‌Bootstrap lui-même a une classe nommée à cet égard nav-justified. Ajoutez-le simplement comme ceci:

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

Si vous souhaitez également aligner le contenu central de <li>, créez son disply: inline-block.

Essaye ça:

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