Comment centrer le contenu dans une colonne Bootstrap ?

Centrage du contenu dans une colonne Bootstrap

Vous rencontrez des difficultés pour centrer le contenu dans une colonne Bootstrap. Le code HTML fourni comprend les éléments suivants :

<code class="html"><div class="row">
   <div class="col-xs-1 center-block">
       <span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
   </div>
</div></code>

Solution :

Le problème réside dans l'utilisation de la classe "center-block". Cette classe n'est plus prise en charge dans les versions actuelles de Bootstrap. Au lieu de cela, vous devez utiliser l'une des méthodes suivantes :

Avant Bootstrap 3 :

Utilisez l'attribut "align" :

<code class="html"><div class="col-xs-1" align="center"></code>

Bootstrap 3 et 4 :

Utilisez la classe "text-center" :

<code class="html"><div class="col-xs-1 text-center"></code>

Bootstrap 4 :

Utilisez Classes flex :

<code class="html"><div class="d-flex justify-content-center">
   <div>some content</div>
</div></code>

Remarque : Bootstrap 4 aligne le contenu horizontalement par défaut. Pour l'alignement vertical, utilisez "flex-direction: column" sur l'élément parent.

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!