Comment centrer le contenu dans la colonne Bootstrap ?

Question

J'essaie de centrer le contenu d'une colonne. On dirait que ça ne marche pas pour moi. Voici mon HTML :

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

Démo JSFiddle

Answer 1

[Mise à jour en avril 2022] : Version 5.1testée et incluse de Bootstrap.

---

Je sais que cette question est ancienne. Et la question ne mentionnait pas quelle version de Bootstrap il utilisait. Je suppose donc que la réponse à cette question est déjà résolue.

Si l'un d'entre vous (comme moi) est tombé sur cette question et cherchait une réponse en utilisant le framework bootstrap actuel 5.0 (2020) et 4.5 (2019), voici la solution.

Bootloader 4.5, 5.0 et 5.1

Utilisez d-flex justify-content-center sur la colonne div. Cela centrera tout dans cette colonne.

<div class="row">
    <div class="col-4 d-flex justify-content-center">
        <!-- Image -->
    </div>
</div>

Si vous souhaitez aligner le texte dans une colonne, utilisez simplement text-center

<div class="row">
    <div class="col-4 text-center">
        <!-- text only -->
    </div>
</div>

Si vous avez du texte et des images dans la colonne, vous devez utiliser d-flex justify-content-center et d-flex justify-content-center 和 text-center .

<div class="row">
    <div class="col-4 d-flex justify-content-center text-center">
       <!-- for image and text -->
    </div>
</div>

Answer 2

Utilisation :

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

au lieu de

<div class="col-xs-1 center-block">

Vous pouvez également utiliser le CSS bootstrap 3 :

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

Bootstrap 4 a désormais une classe Flex pour centrer le contenu :

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

Veuillez noter que par défaut ce sera x-axis，除非flex-direction是column