Tous les articles

Centrer un texte en hauteur

Par Eric Le Bihan

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 »

5 commentaires

Flux RSS des commentaires de cet article

mmm, remplacer les par des c pas terribles niveau sémantique; et donc niveau référencement.

Le 15 Jan. 2010 à 14h30 par ls

Mr. Le Bihan, je viens de m’apercevoir que, sous Safari, ça marche pas du tout du tout si vous mettez pas un display:table-row; entre le table et le table-cell.

Le 06 Avr. 2010 à 18h03 par Mr. Richard

C’est un excellent article, mais qui laisse un gout amer :

Tout ça pour centrer un pauvre texte.

Y a vraiment un problème.

Le 23 Juil. 2010 à 14h21 par honte_au_css

Si on remplace pour IE « position:relative » par « position:absolute » .. ..ça marche plus.

Comment positionner en absolu le div container ?

Le 23 Juil. 2010 à 16h18 par honte_au_css

Les commentaires sont fermés sur cet article.