Travaux pratiques
TROISIÈME PARTIE
132
Centrage vertical des conteneurs
L’alignement vertical des blocs reprend les différentes astuces présentées pour la première dimension (en excluant la technique du line-height, réservée aux éléments en
ligne). Coupler la propriété vertical-align à l’instruction display: table-cell
fonctionne en théorie… mais bogue sur Internet Explorer, navigateur le plus répandu.
Le plus pratique est donc d’adapter la dernière méthode étudiée : associer un positionnement absolu à des marges négatives. Pour un paragraphe de hauteur 50px, on
appliquera ainsi top: 50% puis margin-top: -25px :
Le résultat obtenu est présenté figure 8-5. C’est bien le bloc « élément paragraphe »
qui est centré verticalement, et en aucun cas son contenu textuel. On pourra traiter
ce dernier avec la technique du line-height :
CSS
div#conteneur {
position: relative;
background: yellow;
width: 300px;
height: 100px;
}
div#conteneur p {
position: absolute;
top: 50%;
height: 50px;
margin-top: -25px; // (décalage de la moitié de la hauteur de l’objet)
background: #ccc;
}
HTML

Figure 8–5
Centrage vertical en
position absolue
div#conteneur p {
position: absolute;
top: 50%;