web-dev-qa-db-fra.com

Twitter Bootstrap: Centre Pills

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

J'ai essayé d'ajouter un bloc central autour et de changer le float:left en float:center mais rien n'y fait.

htmlcsstwitter-bootstrap
46
glenn

Cela est devenu beaucoup plus simple! Vous devez simplement utiliser la classe text-center sur le conteneur et appliquer display:inline-block à la ul. Assurez-vous simplement que vous avez un saut de ligne ou une balise de paragraphe séparant la navigation de tout autre élément du conteneur.

Terminé! 2 additions de classes, 1 ligne de CSS (ne modifiez pas le fichier css 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 mentionné, la prise en charge de Flexbox est maintenant assez commune que vous souhaiterez peut-être l'utiliser à la place:

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

Si vous souhaitez des pilules de largeur variable dans un conteneur de largeur variable, nous vous suggérons d'utiliser le type d'affichage inline-block et d'ajouter une classe au conteneur de pilule.

Voici comment j'ai prolongé le bootstrap pour centrer les pilules.

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

Ou approche flexbox:

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

Si vous voulez que les pilules soient centrées au lieu d'être alignées à gauche, vous devrez changer le css. Vous devrez spécifier une largeur et modifier la marge pour qu'elle soit automatique. 

Par exemple:

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

Bien que la réponse de @minaz fonctionne pour une liste de largeur connue, je proposerais une solution différente qui fonctionne même si vous modifiez 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 centre le texte dans la liste et réinitialise la propriété float pour les éléments de la liste afin qu'ils soient affectés par la propriété text-align.

3
JeanMertz

La solution Bootstrap 4 est très simple:

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

https://getbootstrap.com/docs/4.0/components/navs/

0
Kerry7777