HTML : comment aligner verticalement deux div avec Bootstrap ?
Le système de grille de Bootstrap est géré avec la propriété "CSS float égale à left" qui rend impossible l'utilisation de la propriété d'alignement vertical. Voici des solutions.
Bootstrap permet de disposer facilement les éléments selon une grille prédéfinie. Mais ce système de grille est géré avec notamment la propriété CSS float égale à left. Cette propriété rend normalement impossible l'utilisation de la propriété vertical-align, qui permet d'aligner verticalement des éléments. Il existe plusieurs méthodes pour résoudre ce problème.
La première solution consiste à utiliser une classe CSS personnalisée. Dans cette classe, on ajoutera la propriété display avec comme valeur inline-block, ce qui permettra l'alignement vertical. On annulera la propriété float, et on ajoutera l'alignement vertical.
.centreVerticalement {
display: inline-block;
vertical-align: middle;
float: none;
}
Il ne reste plus qu'à appliquer la classe CSS sur les colonnes de la grille de Bootstrap.
<div class=row> <div class=col-xs-5 col-md-3 col-lg-1 centreVerticalement> <div style=height:10em;border:1px solid #000>Big</div> </div><!-- --><div class=col-xs-5 col-md-7 col-lg-9 centreVerticalement> <div style=height:3em;border:1px solid #F00>Small</div> </div> </div>
Vous avez dû noter les commentaires (<!-- -->) présents entre les 2 divisions. Il est très important de les garder. En effet, l'utilisation de la propriété CSS display: inline-block ajoute des espaces supplémentaires s'il y a de l'espace dans votre code ! Pour corriger ce problème, les balises de commentaires suppriment l'espace interprété dans le HTML et corrigent le problème.
Une autre solution consiste à utiliser le modèle des boîtes flexibles disponible avec la version 3 du langage CSS. Il faut pour cela ajouter à la ligne qui contient les éléments une classe personnalisée qui affecte à la propriété display la valeur flex. Par défaut, les éléments sont mis côte à côte sur un axe horizontal. Il suffit donc d'ajouter la propriété CSS align-items avec la valeur center pour que les objets soient alignés au milieu :
.centreVerticalement {
display: flex;
align-items: center;
}
<div class=container>
<div class=row centreVerticalement>
<div class=col-xs-6> ... </div>
<div class=col-xs-6> ... </div>
</div>
</div>
Pour ce système, il est préférable d'utiliser les classes .col-xs- de Bootstrap afin d'éviter des problèmes d'affichage sur les petits écrans. Pensez également à bien ajouter les préfixes, car la compatibilité des navigateurs a beaucoup varié dans le temps. La manière la plus simple de gérer les préfixes CSS est d'utiliser la librairie Autoprefixer. Par ailleurs, l'alignement avec ce système rend l'espace occupé par les colonnes identique à leur taille, ce qui pose des problèmes si vous ajoutez des contenus en dessous de cette ligne. Pour que tous les containers occupent l'espace entier de la ligne (c'est-à-dire l'espace égal à la plus grande colonne), il faut modifier le CSS pour que ce soit les colonnes qui possèdent la propriété align-items avec la valeur center.
.centreVerticalement {
display: flex;
flex-direction: row;
}
.centreVerticalement > [class^=col-],
.centreVerticalement > [class*= col-] {
display: flex;
align-items: center;
justify-content: center; /* Propriété optionnelle, à utiliser si vous souhaitez que les éléments à l'intérieur de la colonne soient centrés horizontalement */
}