Comment centrer le contenu dans les colonnes Bootstrap ?

Centrage du contenu dans les colonnes Bootstrap

Dans Bootstrap, le centrage du contenu dans les colonnes peut être réalisé par diverses méthodes.

Une L'approche courante consiste à utiliser l'attribut align="center" dans la colonne div. Par exemple :

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

Cependant, cette méthode n'est pas entièrement prise en charge par HTML5. Au lieu de cela, Bootstrap 3 fournit une classe de centre de texte dédiée qui peut être appliquée à la colonne :

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

Pour Bootstrap 4, les classes flex offrent une solution plus moderne et plus efficace pour centrer le contenu :

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

Cette méthode centre le contenu le long de l'axe x par défaut, sauf si la propriété flex-direction est définie sur colonne pour centrer le long de l'axe y.

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!