Comment centrer les éléments dans Twitter Bootstrap ?

Centrage des éléments dans Twitter Bootstrap

Lorsque vous travaillez avec Twitter Bootstrap, il est nécessaire de centrer les éléments dans leurs conteneurs parents. Voici les méthodes que vous pouvez utiliser :

Centrage horizontal :

1. Classe text-center : Utilisez la classe text-center sur le conteneur parent pour aligner horizontalement tous les éléments enfants.

2. Style en ligne : Définissez la propriété CSS text-align: center sur le conteneur parent ou l'élément enfant que vous souhaitez centrer.

3. Décalages (nouvelle méthode) :Introduite dans Bootstrap 4, la classe mx-auto ajoute des marges horizontales à un élément, le faisant ainsi être centré.

Centrage vertical :

1. padding-top et padding-bottom : Utilisez les propriétés padding-top et padding-bottom sur le conteneur parent pour ajouter un espacement vertical et centrer les éléments enfants.

2. Positionnement absolu : Positionnez l'élément enfant de manière absolue et définissez le dessus : 50 % ; et transform : translate(-50%, -50%).

Remarque : Les solutions ci-dessus sont applicables aux anciennes versions de Bootstrap. Pour Bootstrap 4 et versions ultérieures, la classe mx-auto est l'approche recommandée pour le centrage horizontal.

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!