Comment centrer le contenu de la barre de navigation dans Bootstrap 3 à l'aide de CSS ?

CSS pour centrer le contenu de la barre de navigation

Vous avez du mal à centrer le contenu dans la barre de navigation de Bootstrap ? N'abandonnez pas ! Résolvons les problèmes à l'aide d'un extrait de code HTML et CSS fourni.

Problème :

Utilisation de Bootstrap 3, mais les méthodes existantes n'alignent pas le contenu de manière centrale dans la barre de navigation.

Code HTML :

Fourni pour référence (mais non incluse ici).

CSS révisé :

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

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

Explication :

• Supprimé float : à gauche de .navbar .navbar-nav pour centrer la navigation interne.
• Définir l'affichage : bloc en ligne pour maintenir l'alignement horizontal.
• Alignement vertical ajusté : haut pour un alignement correct.
• Inclus .navbar .navbar-collapse pour aligner le contenu interne des barres de navigation réduites.

Amélioré Extrait :

<div class="navbar navbar-default" role="navigation">
  <!-- ... -->

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

  <!-- ... -->
</div>

Ajustements réactifs :

Pour limiter l'effet de centrage aux barres de navigation non réduites, ajoutez cette requête média :

@media (min-width: 768px) {
  .navbar .navbar-nav {
    display: inline-block;
    float: none;
    vertical-align: top;
  }

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

Maintenant, le contenu de votre barre de navigation sera centré sans effort à la fois réduit et non réduit États.

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!