Prérequis.
sommaireAvec line-height
.
Fixer une hauteur de ligne est la méthode la plus simple pour centrer verticalement les éléments inline. Ici, on simplement placé du texte dans un conteneur avec un line-height
.
Attention : chaque saut de ligne sera affecté par la valeur de la hauteur de ligne.
line-height
./* Conteneur pour le texte */
#demo-opt1 {
border: thin solid black;
line-height: 6rem;
color: red;
}
line-height
.
Texte centré
avec un saut de ligne.
Avec position:relative
ou padding
.
Dans les deux cas, il s’agit de placer un élément à hauteur fixe, à égales distances du haut et du bas de son conteneur.
Ici, on a placé un bloc rouge haut de 4 unités, dans un conteneur haut de 6 unités. Pour centrer verticalement, on a simplement donné une marge haute d’1/6e en haut (et par conséquent en bas aussi).
Note : donner un padding: 1rem 0;
au conteneur aurait également pu centrer le bloc.
position:relative
./* Boîte à centrer */
.boite-centree {
position: relative;
top: 16.7%;
width: 4rem;
height: 4rem;
background: red;
}
/* Conteneur de la boîte */
#demo-opt2 {
border: thin solid black;
height: 6rem;
}
position:relative
.Avec display:table-cell
.
Par défaut, une cellule de tableau centre verticalement son contenu. Simulez ce comportement en combinant display:table-cell;
et vertical-align:middle;
sur le conteneur de l’élément à centrer.
display:table
./* Boîte à centrer */
.boite-centree {
width: 4rem;
height: 4rem;
background: red;
}
/* Conteneur simulant la cellule */
#demo-opt3{
display: table-cell;
border: thin solid black;
height: 6rem;
vertical-align: middle;
}
display:table-cell
.