Comment centrer verticalement sur tous les navigateurs ? Introduction
Ce tutoriel présente des solutions pour centrer verticalement des éléments de tailles variables dans des conteneurs de hauteur fixe ou fluide. Les techniques exposées sont compatibles avec tous les navigateurs actuels, y compris IE7 (IE6 n'est volontairement pas abordé) et n'utilisent ni <table>, ni JavaScript.
Le temps du valign=middle sur nos tableaux de mise en page est bel et bien révolu. La démocratisation de la sémantique (X)HTML a donné naissance à de jolis gabarits standardisés, mais a également marqué la disparition des techniques simples pour centrer verticalement.
Avec CSS2 et l'arrivée de nouvelles valeurs pour la propriété display, beaucoup ont vu en table-cell une nouvelle ère pour le centrage vertical. Cette valeur permet d'indiquer qu'un élément doit se comporter comme une cellule d'un tableau, sur laquelle le vertical-align:middle pourrait fonctionner. Comme à la bonne époque des <table>.
Le centrage vertical doit théoriquement fonctionner sur un élément "en-ligne"
Malheureusement, c'était sans compter sur le vilain petit canard : Internet Explorer. En effet, celui-ci ne supporte display:table-cell qu'à partir de sa version 8. Si aujourd'hui, faire sans IE6 peut être envisageable, il n'est pas évident de faire de même avec son grand frère (actuellement 15% des internautes utilisent IE7, et celui-ci est imposé par les administrateurs réseaux dans encore beaucoup d'entreprises).
Bref, le dossier "display:table-cell et centrage vertical" fût rangé au placard, on s'est dit qu'on le ressortirait après les funérailles d'IE6 et d'IE7. L'acharnement provoqué autour de la propriété table-cell a finalement réussi à ancrer dans les mœurs des idées bien reçues autour du centrage vertical : "Non, il n'est pas possible aujourd'hui de centrer verticalement à cause d'IE".
Pourtant, si l'on remonte à la source et que l'on regarde la spécification de la propriété vertical-align :
"La propriété vertical-align s'applique aux éléments de type en-ligne et à l'élément table-cell."
On retrouve effectivement notre ami table-cell, mais pourquoi la piste des éléments de type "en-ligne" a-t-elle suscité aussi peu d'attention ?
Et au fait, le vertical-align ça marche comment ? Descendons un peu plus bas dans la documention :
"vertical-align se rapporte à la valeur de la propriété line-height de l'élément lui-même."
Donc pour résumer, et sans rien inventer, le centrage vertical doit théoriquement fonctionner sur un élément "en-ligne" (de nature, ou modifié avec display:inline-block), couplé avec un line-height adéquat.
Avant d'aller plus loin
Ce tutoriel n'a pas pour vocation d'expliquer en détail le fonctionnement du display:inline-block. Les techniques abordées ne sont pas initialement compatibles avec Internet Explorer 6. Elles pourraient l'être avec Firefox 2.x, mais au vu des statistiques de ce dernier, est-ce bien nécessaire ? Le code présenté a été allégé afin de ne présenter que l'essentiel de chaque technique.
Attention : la plupart des techniques présentées ici utilisent du line-height sur des éléments (de nature ou modifiés) inline. Ce qui veut dire que le résultat peut varier en fonction de la police utilisée et de sa taille (donc du navigateur, du système d'exploitation, etc.). D'une manière générale, n'utilisez pas ces techniques pour créer des gabarits où les éléments sont alignés au "pixel près", mais plus pour réaliser les mises en forme de vos contenus.
Essayons de voir ce que cela donne en pratique...