Si l’alignement horizontal est plutôt facile, lorsqu’un élément est de type inline on utilise text-align: center .
Et lorsque un élément est de type block, on lui donne une largeur (width) et on utilise margin: auto pour le centrer.
Par contre, savoir centrer verticalement les éléments est une autre histoire qui peut parfois virer au cauchemar pour les créateurs de site web.
Au cours de cette leçon, nous allons essayer de dépoussiérer tout ça.
Il existe différentes méthodes pour parvenir à centrer verticalement un élément, je vais vous en présenter 4.
Plan du cours
Vertical-align: middle
Je commence par cette première propriété, car elle peut vite poser beaucoup de problèmes.
- Elle ne marche pas avec les éléments de type block, seulement avec les éléments de type inline.
- Elle est souvent utilisé conjointement avec table-cell comme dans l’exemple que nous allons utiliser ci-dessous.
Exemple :
On crée un conteneur (div) dans lequel on met 2 paragraphes que l’on veut centrer verticalement et horizontalement.
Le div étant un élément de type block, on doit le transformer.
Pour ce faire, nous allons utiliser display: table-cell, il nous suffira ensuite de rajouter vertical-align: middle pour centrer verticalement les deux paragraphes (text-align : center se chargera de l’alignement horizontal)
.conteneur {
width: 300px;
height: 300px;
border: 3px solid black;
text-align: center;
display: table-cell;
vertical-align: middle;
}
Voilà deux paragraphes parfaitement centrés et cela marche aussi bien avec les images.
Line-height
Cette méthode marche seulement lorsqu’on veut centrer verticalement une seule ligne de texte.
Si le texte doit retourner à la ligne, on peut contourner le problème (je vous montrerai) mais si vous voulez par exemple créer un autre paragraphe cette méthode ne fonctionnera pas.
Exemple :
1 : on crée un conteneur (div) à l’intérieur duquel on met un paragraphe.
2 : Nous donnons une hauteur spécifique (200px) au conteneur et nous définissons une valeur identique à la propriété line-height.
.conteneur {
height: 200px;
line-height: 200px;
text-align: center;
border: 3px solid blue;
}
Une hauteur de ligne de 200px s’applique à la seconde ligne de texte, c’est la catastrophe !
Comment résoudre ce problème ?
Nous sommes d’accord que la propriété line-height se trouve être une propriété du conteneur.
Nous allons donc appliquer aussi un line-height à notre paragraphe qui servira à déterminer l’écart entre les deux lignes.
Nous lui rajouterons aussi les propriétés display: inline-block et vertical-align: middle.
.conteneur {
height: 200px;
line-height: 200px;
text-align: center;
border: 3px solid blue;
}
.conteneur p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
.conteneur img {
vertical-align: middle;
}
Padding (marge intérieure)
C’est l’une des manières les plus simples de centrer verticalement un élément.
Comme toujours on crée un conteneur puis cette fois-ci on va mettre un titre h2 pour changer.
Ensuite, on donne au conteneur une marge intérieure en haut et en bas.
.conteneur2 {
padding: 50px 0;
border: 3px solid green;
text-align: center;
}
Si votre conteneur a une hauteur spécifique (height) disons de 200px alors il va vous falloir calculer.
Certains vont peut-être penser qu’il suffit pour calculer le padding de faire 200/2 = 100 donc un padding de 100px en haut et en bas et le tour est joué !
Eh bien non car il faut aussi prendre en compte la hauteur de ligne (line-height) du titre h2 qui est ici de 28px (légèrement supérieure au font-size qui est de 24px);
Donc on soustrait à la hauteur de notre conteneur le line-height du paragraphe :
200 – 28 = 172.
Il nous reste 172px.
172 / 2 = 86px
Les marges intérieures hautes et basses doivent donc être de 86px.
.conteneur3 {
height: 200px;
padding: 86px;
border: 3px solid green;
text-align: center;
}
Flexbox
Bon et bien pour finir, je vous présente la façon la plus simple pour le centrage vertical. Je vous la présente en dernier pour que vous preniez bien conscience de l’utilité d’apprendre la méthode flexbox, qui vous simplifiera la vie dans bien des cas.
Ne pouvant refaire tout un cours sur flexbox ( vous trouverez un tuto ici : Tutoriel flexbox
Je vais me contenter de vous rappeler la méthode du centrage vertical :
Je crée le conteneur :
1 : J’applique flexbox sur le conteneur avec display: flex;
2 :Je détermine dans quelle direction le conteneur va placer ses éléments : (ici verticalement) flex-direction: column;
3 :Puis je centre les éléments avec justify-content: center;
.conteneur4{
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
height: 200px;
border: 3px solid red;
}
Nous avons fini avec cette leçon, n’hésitez pas à aller consulter le tutoriel sur flexbox, une fois que vous maîtriserez cette méthode vous ne le regretterez pas.
