Centrer verticalement le contenu d’une colonne Bootstrap

J’utilise souvent Bootstrap comme base pour la mise en page de templates HTML et suis souvent amené à devoir center le contenu d’une div sur la hauteur. C’est surtout embêtant lorsque sa taille n’est pas fixée, mais grâce au grid system de Bootstrap et à une petite nouveauté CSS3, c’est facilement réalisable.

Pour commencer, voici un simple exemple de grille Bootstrap :

<div class="container">
    <div class="row">
        <div class="col-md-6">
            Colonne gauche
        </div>   
        <div class="col-md-6">
            Colonne droite
        </div>
    </div>
</div>
Exemple de grille Bootstrap

 

Grâce à quelques lignes de CSS3, il est possible de center verticalement le contenu des colonnes de cette grille Bootstrap :

.row {
  display: flex;
  flex-direction: row;
}

.row > [class^="col-"],
.row > [class*=" col-"] {
  display: flex;
  align-items: center;
}
Contrôle de l'alignement vertical en CSS

 

Il est également possible de centrer horizontalement et verticalement le contenu des colonnes en ajoutant une propriété CSS :

.row > [class^="col-"],
.row > [class*=" col-"] {
  justify-content: center;
}
Contrôle de l'alignement horizontal

 

2 réponses sur “Centrer verticalement le contenu d’une colonne Bootstrap”

  1. Bonjour,
    Merci pour votre, Tuto le centrage vertical marche bien avec BootStrap 3.
    Par contre celà aligne les textes d’une div sur la même ligne. Voir exemple ci-après :
    Menu
    Pour mon menu Burger j’avais avant le texte Menu au dessus de l’image du burger (menu.svg) et maintenant avec le css du centrage verticale ils sont côte à côte. J’ai rajouté un entre les 2 mais celà leslaisse toujours sur la même ligne…

    Avez-vous une idée pour rétablir ce problème ?
    Par avance merci et bonne journée.
    Magvore

    1. En effet dans ce cas ça ne fonctionnera pas, car tous les éléments sont impactés par l’utilisation de l’attribut « flex ». Un retour à la ligne ne changera rien car la balise est elle aussi impactée. Il faudrait peut-être essayer de fixer la largeur des éléments pour qu’ils prennent toute la place possible et qu’ils évident de se stacker.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *