Comment puis-je centrer des éléments dans une barre de navigation Bootstrap ?

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

Le centrage des éléments dans la barre de navigation Bootstrap peut être difficile en raison de la manière dont les composants sont disposés de manière flexible. Cependant, voici quelques moyens efficaces pour y parvenir :

Bootstrap 5 (2021)

La barre de navigation utilise toujours flexbox, les principes d'alignement restent donc similaires à ceux de Bootstrap 4. Le "Nom du site Web" peut être centré à l'aide de mx-auto. Il n'est plus nécessaire que les menus latéraux gauche et droit soient flottants.

Exemple de code :

<nav></nav>

Bootstrap 4.1

La Navbar exploite désormais flexbox, permettant le centrage à l'aide de mx-auto. Les menus latéraux gauche et droit ne nécessitent plus l'utilisation de flotteurs.

Exemple de code :

<nav></nav>

Bootstrap 4 Beta

Si la Navbar ne comporte qu'une seule barre de navigation-nav, vous pouvez également utiliser justify-content-center pour aligner le contenu.

Centrage de la barre de navigation avec position absolue

Vous pouvez absolument positionner l'élément que vous souhaitez centrer en utilisant :

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

Centrage de la barre de navigation avec Flexbox Imbrication

Une autre option consiste à centrer l'élément à l'aide de flexbox :

Remarque : Les solutions ci-dessus centrent le "Nom du site Web" par rapport à la gauche et barre de navigation droite-nav. L'ajout de la classe flex-fill garantit que chaque section remplit la largeur de la barre de navigation, évitant ainsi un mauvais alignement lorsque la largeur des sections adjacentes varie.

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!