Centrage des éléments en CSS
CHAPITRE 8
127
Centrage vertical des éléments de contenu
La méthode vertical-align
Nous vous recommandons la lecture de l’annexe, et notamment de son catalogue intégral des propriétés CSS. Il comporte une propriété très intéressante : vertical-align.
Il est courant qu’on tente de lui faire centrer verticalement un contenu dans un bloc.
Cela ne fonctionne pas, et tel n’est pas l’objet de cette instruction dans les recommandations du W3C. vertical-align ne porte en effet que sur les éléments en ligne
ou de type « cellule de tableau » (porteurs de la déclaration display: table-cell).
Cette propriété n’est pas prévue pour aligner un texte dans un bloc, mais un élément
en ligne avec un autre élément en ligne (par exemple une image à côté d’un texte) ou
dans un élément de type cellule. Elle n’est donc adaptée qu’au centrage des éléments
dans les blocs considérés comme des cellules de tableau.
On peut modifier le type d’un élément (et transformer un bloc en élément en ligne
ou inversement) avec la propriété CSS display. Cette dernière permet aussi de
transformer un élément en cellule de tableau comme suit :
On obtient alors un support adéquat pour la propriété vertical-align et le centrage
vertical d’éléments. Malheureusement, la déclaration display: table-cell n’est pas
reconnue par certains navigateurs, parmi lesquels le plus répandu : Internet Explorer
(y compris dans sa version 7). Cette incompatibilité dissuade de recourir à cette
méthode de centrage vertical. C’est pourquoi nous évoquons maintenant une technique plus spécifique.
La méthode line-height
Rappelons que la propriété CSS line-height, à ne pas confondre avec les espaces
laissés entre les paragraphes, détermine la hauteur d’une ligne de texte dans un bloc.
Par défaut, le texte prend place au centre de cette zone.
Adopter une valeur de line-height égale à la hauteur du bloc conteneur provoquera
donc un centrage vertical du texte dans ce dernier. C’est évidemment une
« bidouille » très spécifique et fragile, qui ne fonctionne pas si le contenu occupe plusieurs lignes. Illustrons cette méthode avec l’exemple d’un bloc conteneur (un
d’identifiant conteneur) de même hauteur que la propriété line-height.
selecteur {display: table-cell;}
HTML
Un texte centré verticalement
CHAPITRE 8
127
Centrage vertical des éléments de contenu
La méthode vertical-align
Nous vous recommandons la lecture de l’annexe, et notamment de son catalogue intégral des propriétés CSS. Il comporte une propriété très intéressante : vertical-align.
Il est courant qu’on tente de lui faire centrer verticalement un contenu dans un bloc.
Cela ne fonctionne pas, et tel n’est pas l’objet de cette instruction dans les recommandations du W3C. vertical-align ne porte en effet que sur les éléments en ligne
ou de type « cellule de tableau » (porteurs de la déclaration display: table-cell).
Cette propriété n’est pas prévue pour aligner un texte dans un bloc, mais un élément
en ligne avec un autre élément en ligne (par exemple une image à côté d’un texte) ou
dans un élément de type cellule. Elle n’est donc adaptée qu’au centrage des éléments
dans les blocs considérés comme des cellules de tableau.
On peut modifier le type d’un élément (et transformer un bloc en élément en ligne
ou inversement) avec la propriété CSS display. Cette dernière permet aussi de
transformer un élément en cellule de tableau comme suit :
On obtient alors un support adéquat pour la propriété vertical-align et le centrage
vertical d’éléments. Malheureusement, la déclaration display: table-cell n’est pas
reconnue par certains navigateurs, parmi lesquels le plus répandu : Internet Explorer
(y compris dans sa version 7). Cette incompatibilité dissuade de recourir à cette
méthode de centrage vertical. C’est pourquoi nous évoquons maintenant une technique plus spécifique.
La méthode line-height
Rappelons que la propriété CSS line-height, à ne pas confondre avec les espaces
laissés entre les paragraphes, détermine la hauteur d’une ligne de texte dans un bloc.
Par défaut, le texte prend place au centre de cette zone.
Adopter une valeur de line-height égale à la hauteur du bloc conteneur provoquera
donc un centrage vertical du texte dans ce dernier. C’est évidemment une
« bidouille » très spécifique et fragile, qui ne fonctionne pas si le contenu occupe plusieurs lignes. Illustrons cette méthode avec l’exemple d’un bloc conteneur (un
d’identifiant conteneur) de même hauteur que la propriété line-height.
selecteur {display: table-cell;}
HTML
Un texte centré verticalement