Comment centrer les éléments horizontalement et verticalement dans Twitter Bootstrap ?

Un guide complet sur le centrage des éléments dans Twitter Bootstrap

Lorsque vous travaillez avec Twitter Bootstrap, la nécessité de centrer les éléments verticalement ou horizontalement dans les conteneurs parents se pose fréquemment. Ce cadre polyvalent propose plusieurs approches pour réaliser cet alignement.

Centrage horizontal

1. Classe text-center : Appliquer le centre de texte classe au conteneur parent pour centrer son contenu horizontalement. Il s'agit d'une méthode simple et efficace pour les éléments textuels et non textuels.
2. Classe mx-auto : Si vous avez besoin de plus de flexibilité et souhaitez décaler le centrage, utilisez le mx-auto classe. Il ajoute des marges automatiques à gauche et à droite de l'élément, en le poussant vers le centre.

Centrage vertical

Bootstrap n'offre pas de fonction intégrée utilitaire pour le centrage vertical. Cependant, il existe deux techniques courantes :

1. Classe centrée sur la pagination : Pour centrer verticalement un seul élément dans un conteneur avec des contrôles de pagination, appliquez la classe centrée sur la pagination à la pagination. wrapper de contrôle.
2. CSS personnalisé : Vous pouvez également utiliser du CSS personnalisé pour centrer verticalement les éléments. Par exemple, définissez les propriétés margin-top: auto et margin-bottom: auto sur l'élément que vous souhaitez centrer.

Remarque :

Le texte Les classes -center et centrées sur la pagination sont obsolètes dans les versions récentes de Bootstrap. Il est recommandé d'utiliser plutôt les utilitaires mx-auto et d-flex.

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!