Comment centrer les éléments dans une barre de navigation Bootstrap ?

Centrage des éléments dans la barre de navigation Bootstrap

Lorsque vous essayez de centrer des éléments dans une barre de navigation Bootstrap, cela peut sembler difficile. Cependant, avec les techniques appropriées, cela est réalisable.

Bootstrap 4 et versions ultérieures

Bootstrap 4 et versions ultérieures utilisent flexbox, ce qui simplifie les processus d'alignement. Pour centrer un élément, tel que « Nom du site Web », ajoutez la classe « mx-auto » au « nav.navbar-nav » qui le contient. Cela le centrera par rapport aux éléments "nav.navbar-nav" gauche et droit.

Par exemple :

<nav class="navbar navbar-dark bg-dark main-nav">
  <div class="container">
    <ul class="nav navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Download</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Register</a>
      </li>
    </ul>

    <ul class="nav navbar-nav mx-auto">
      <li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
    </ul>

    <ul class="nav navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Rates</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Help</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

Versions Bootstrap précédentes

Pour les versions Bootstrap antérieures à 4, centrage requis à l'aide de l'imbrication flexbox ou position : absolue techniques.

Options supplémentaires

Si la barre de navigation ne contient qu'un seul "nav.navbar-nav", vous pouvez utiliser "justify-content-center" pour centrer son contenu.

Centrage absolu

Pour obtenir un centrage absolu, vous pouvez utiliser soit la position : méthode absolue ou imbrication flexbox.

Position absolue

.abs-center-x {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

Flexbox Nesting

Imbriquer l'élément centré dans un autre conteneur flexbox avec "justify-content-center" et "flex-fill" appliqué.

<ul class="nav navbar-nav flex-fill">
  <li class="nav-item">
    <ul class="nav navbar-nav justify-content-center">
      <li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
    </ul>
  </li>
</ul>

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!