Comment centrer verticalement sur tous les navigateurs ? Centrer verticalement du texte dans un conteneur de hauteur fixe

Centrer verticalement une ligne de texte dans un conteneur de hauteur fixe

Ligne de texte centrée verticalement dans un conteneur de hauteur fixe

 <p>Lorem ipsum</p> 

 p { 
height:200px; 
line-height:200px; 
text-align:center; /* centrage horizontal */ }

Technique mondialement connue qui a fait ses preuves. On utilise le combo height / line-height pour réaliser le centrage, la propriété vertical-align devient optionnelle.

Centrer verticalement plusieurs lignes de texte dans un conteneur de hauteur fixe

Plusieurs lignes de texte centrées verticalement dans un conteneur de hauteur fixe :

 p { 
height:200px; 
line-height:200px; 
text-align:center; /* centrage horizontal */ } 

 span { 
width:100px; /* largeur zone de texte */ 
border:1px solid #fff; 
vertical-align:middle; 
display:inline-block; 
line-height:1.2; /* on rétablit le line-height */ 
text-align:left; /* ... et l'alignement du texte */ }

Comme pour le centrage vertical d'une image, on dispose de trois écritures pour faire fonctionner la technique sur IE7 (mettre des espaces, encapsuler dans un élément "en-ligne" ou encore indenter l'imbrication).

Pas besoin de corriger le inline-block pour IE7, cette valeur fonctionne correctement sur les éléments nativement "en-ligne".

BeliG pour Alsacreations sous licence Creative Commons