Comment centrer correctement le contenu dans les colonnes Bootstrap ?

Alignement du contenu dans les colonnes Bootstrap

Lorsque vous travaillez avec des colonnes Bootstrap, l'alignement du contenu qu'elles contiennent peut parfois présenter des défis. Une exigence courante consiste à centrer le contenu horizontalement et verticalement. Cet article explique comment y parvenir à l'aide des classes Bootstrap.

Dans le code HTML suivant, la tentative de centrer le contenu de la colonne à l'aide de la classe "center-block" ne semble pas fonctionner.

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

Pour résoudre ce problème, utilisez l'attribut "align" au lieu de la classe "center-block".

<code class="html"><!-- unsupported by HTML5 -->
<div class="col-xs-1" align="center"></code>

De plus, Bootstrap 3 propose la classe "text-center" et Bootstrap 4 fournit la classe "d-flex justifier-content-center" pour un alignement plus concis et moderne.

<code class="html"><!-- recommended method -->
<div class="col-xs-1 text-center">

<!-- Bootstrap 4 -->
<div class="d-flex justify-content-center">
   <div>some content</div>
</div></code>

Notez que les classes flex de Bootstrap 4 centreront le contenu le long de l'axe x par défaut, à moins que "flex-direction " est défini sur " colonne ".

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!