Twitter Bootstrap: pilules centrales

Ma question est de savoir comment centrer les pilules?

J’ai essayé d’append un bloc central et de changer le float:left pour float:center mais rien n’aide.

Cela est devenu beaucoup plus simple! Il vous suffit d’utiliser la classe text-center sur le conteneur et d’appliquer display:inline-block au ul . Assurez-vous simplement d’avoir un saut de ligne ou une balise de paragraphe séparant le nav des autres éléments du conteneur.

Terminé! 2 ajouts de classe, 1 ligne de CSS (ne modifiez pas le fichier css bootstrap!).

HTML:

  

CSS:

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

Edit 2015 : Comme Artur Beljajev l’a évoqué, le support Flexbox est désormais assez courant pour que vous souhaitiez l’utiliser à la place:

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

Si vous souhaitez utiliser des pilules de largeur variable dans un conteneur de largeur variable, je vous suggère d’utiliser le type d’affichage en inline-block intégré et d’append une classe au conteneur de pilules.

Voici comment j’ai étendu 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:

  

Ou approche flexbox:

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

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 changer la marge pour qu’elle soit automatique.

Par exemple:

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

Bien que la réponse de @minaz fonctionne pour une liste avec une largeur connue, je proposerais une solution différente qui fonctionne réellement 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 centrera le texte dans la liste et réinitialisera la propriété float pour les éléments de liste afin qu’ils soient affectés par la propriété text-align .

Une solution simple avec Bootstrap 4 Utilisez justify-content-center à

    nav

    Exemple:

     @import url('https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css') 
       

    Hi

    Hi

    Ni Hao

    La solution Bootstrap 4 est très simple:

      

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