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
