Je réagis à un billet de Jay Salvat qui explique comment centrer un texte en hauteur (et en largeur). Je n’avais pas prévu de faire un billet à la base mais de laisser un commentaire sur http://blog.jaysalvat.com. Devant l’impossibilité de laisser un commentaire avec du code html et css, je vais détailler ici deux différentes façons de centrer un texte en hauteur (deux manières qui, nous allons le voir, sont complémentaires).

Pour un code html donné :

<div id="container">
    <div class="level1">
        <div class="level2">
            Texte centré en hauteur<br />
            sur plusieurs lignes
        </div>
     </div>
</div>

Appliquons un code css qui va permettre de considérer la div contenant le texte comme une cellule de tableau :

div{width:500px;}
#container{height:80px;background-color:red;display:table;}
.level1{display:table-cell;vertical-align:middle;}

Le conteneur (#container) est considéré comme étant l’élément table (cette ligne n’est pas obligatoire comme nous l’avons vu dans un autre article des Intégristes qui explique le fonctionnement du display:table), la div qui a la classe level1 est considérée comme étant une cellule de tableau et se comportera de la même manière. Pour centrer le texte en hauteur on lui applique le couple propriété/valeur vertical-align:middle.

Un petit tour des navigateurs les plus communément utilisés, nous permet de nous rendre compte que cette solution ne convient pas à Internet Explorer (6 et 7). Nous allons nous servir de la div.level2 qui n’avait aucune utilité dans l’exemple précédent pour appliquer le code CSS suivant uniquement à Internet Explorer en utilisant les commentaires conditionnels HTML :

<!--[if IE]>
<style type="text/css" media="screen">
div{width:500px;}
#container{height:80px;position:relative;background-color:red;}
.level1{position:absolute;top:50%;}
.level2{position:relative;top:-50%;}
</style>
<![endif]-->

Pour que le code css précédemment créé et qui fonctionne dans les navigateurs hors IE ne s’applique pas à IE, nous allons ajouter, les commentaires suivants :

<!--[if !IE]>-->

<!--<![endif]-->

Ce qui donne

<!--[if !IE]>-->
<style type="text/css" media="screen">
div{width:500px;}
#container{height:80px;background-color:red;display:table;}
.level1{display:table-cell;vertical-align:middle;}
</style>
<!--<![endif]-->

Vous allez certainement me poser ma question : pourquoi ne pas appliquer la deuxième solution à tous les navigateurs et pas uniqument à IE6 ?
Tout bonnement parce que la deuxième solution ne fonctionne que dans IE !

Plus d’exemples dans ce tutorial vraiment complet du blog In The Woods »