Maison  >  Article  >  interface Web  >  Comment centrer le contenu dans une colonne Bootstrap ?

Comment centrer le contenu dans une colonne Bootstrap ?

Patricia Arquette
Patricia Arquetteoriginal
2024-10-30 06:46:27464parcourir

How to Center Content in a Bootstrap Column?

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn