Comment centrer le contenu dans une barre de navigation Bootstrap 3 ?

Centrage du contenu dans la barre de navigation Responsive Bootstrap

Question :

Malgré l'exploration de nombreuses solutions en ligne, vous rencontrez des difficultés pour centrer le contenu dans votre barre de navigation Bootstrap 3. Pouvez-vous nous aider avec du CSS ou des méthodes qui alignent le contenu en conséquence tout en maintenant la compatibilité du code ?

Exemple de code :

<nav class="navbar navbar-default" role="navigation">
  <!--- ... -->
  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav">
      <!--- ... -->
    </ul>
  </div>
</nav>

Réponse :

Méthode :

Pour centrer le contenu, modifiez le CSS de les classes .navbar .navbar-nav et .navbar .navbar-collapse comme suit :

.navbar .navbar-nav {
  display: inline-block;
  float: none;
  vertical-align: top;
}

.navbar .navbar-collapse {
  text-align: center;
}

Explication :

Ces modifications vous permettent de :

• Supprimez la propriété float: left par défaut de .navbar .navbar-nav, permettant aux éléments de s'aligner côte à côte.
• Définir l'affichage : bloc en ligne ; pour intégrer les éléments de navigation, en conservant un espacement approprié.
• Centrez le texte dans la barre de navigation à l'aide de text-align: center; sur .navbar .navbar-collapse.

Notes supplémentaires :

• Si vous souhaitez uniquement cet effet de centrage sur des écrans plus grands, entourez le CSS dans une requête média, ciblant la taille d'écran appropriée.
• Jouez avec le CSS pour affiner l'emplacement exact du contenu.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!