Twitter Bootstrap : Pilules centrales

Question

Ma question est de savoir comment vous pouvez centrer les pilules ?

J'ai essayé d'ajouter un bloc central autour et de modifier l'adresse de l'utilisateur. float:left a float:center mais rien n'y fait.

Answer 1

C'est devenu beaucoup plus simple ! Il vous suffit d'utiliser le text-center sur le conteneur, et appliquer la classe display:inline-block à la ul . Veillez simplement à ce qu'un saut de ligne ou une balise de paragraphe sépare le nav des autres éléments du conteneur.

C'est fait ! 2 ajouts de classes, 1 ligne de CSS (ne modifiez pas le fichier css de bootstrap !).

HTML :

<div class="col-md-12 text-center">
    <p>Copyright stuff</p>
    <ul class="nav nav-pills center-pills">
        <li><a href="#">Footer nav link</a></li>
        <li><a href="#">Footer nav link</a></li>
    </ul>
</div>

CSS :

.center-pills { display: inline-block; }

Edit 2015 : Comme Artur Beljajev l'a signalé, le support de Flexbox est maintenant assez commun que vous pourriez vouloir l'utiliser à la place :

.center-pills {
    display: flex;
    justify-content: center;
}

Answer 2

Si vous souhaitez avoir des pilules de largeur variable dans un conteneur de largeur variable, je vous suggère d'utiliser la balise inline-block le type d'affichage et l'ajout d'une classe au conteneur de pilules.

Voici comment j'ai étendu le bootstrap pour les pilules de centrage.

CSS :

.centered-pills { text-align:center; }
.centered-pills ul.nav-pills { display:inline-block; }
.centered-pills li { display:inline; }
.centered-pills a { float:left; }
* html .centered-pills ul.nav-pills { display:inline; } /* IE6 */
*+html .centered-pills ul.nav-pills { display:inline; } /* IE7 */

HTML :

<div class="row">
  <div class="span12 centered-pills">
    <ul class="nav nav-pills">
      <li><a href="#">derek</a></li>
      <li><a href="#">brooks</a></li>
      <li><a href="#">is</a></li>
      <li><a href="#">super</a></li>
      <li class="active"><a href="#">awesome</a></li>
    </ul>
  </div>
</div>

Answer 3

Ou l'approche flexbox :

.nav-pills {
    display: flex;
    justify-content: center;
}

Answer 4

Si vous souhaitez que les pilules soient centrées au lieu d'être alignées à gauche, vous devrez modifier le fichier css. Vous devrez spécifier une largeur et changer la marge en auto.

Par exemple :

.tabs, .pills {
    margin: 0 auto;
    padding: 0;
    width: 400px;
}

Answer 5

Bien que la réponse de @minaz fonctionne pour une liste avec une largeur connue, je propose une solution différente qui fonctionne même si vous changez le contenu de la liste :

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

.tabs li, .pills li {
  float: none;
}

Ou en SCSS :

.tabs, .pills {
  text-align: center;
  li { float: none; }
}

Cela permet de centrer le texte à l'intérieur de la liste, et de réinitialiser l'option float pour les éléments de la liste afin qu'ils soient affectés par la propriété text-align propriété.