Comment obtenir un texte aligné verticalement au milieu d'une div ?
Méthode HTML : Le texte à centrer verticalement est contenu directement dans la division.
<div id=contenu> Texte qui doit être centré verticalement </div>
La première solution consiste à utiliser l'attribut line-height qui permet de préciser la hauteur de la ligne. Il faut que la valeur de cette propriété soit égale à celle de la hauteur de ligne (propriété height). Le contenu de la ligne sera alors automatiquement centré sur la verticale :
#contenu {
font:Verdana, Geneva, sans-serif;
font-size:18px;
text-align:left;
height:50px;
vertical-align:middle;
line-height: 50px;
}
Cette solution ne fonctionnera pas si le contenu est sur plusieurs lignes (on obtiendra alors des lignes éloignées les unes des autres à cause de la propriété line-height).
Méthode CSS : Pour aligner verticalement un texte de plusieurs lignes en CSS, ajoutez tout d'abord un autre container, par exemple un <span>, pour contenir le texte :
<div id=contenu> <span>Texte qui doit être centré verticalement</span> </div>
Modifiez ensuite le CSS pour que la division se comporte comme un tableau au niveau de l'affichage. Fixez la propriété display à table. Fixez également la largeur de la division pour que l'affichage fonctionne. Ici, on utilisera la valeur 100% pour que la division prenne toute la place. Pour que le <span> se comporte comme une cellule d'un tableau, utilisez la valeur table-cell de la propriété display. Avec un affichage paramétré comme une cellule de tableau, la propriété vertical-align fonctionne comme dans un tableau et permet ainsi d'aligner n'importe quel texte verticalement :
#contenu{
font:Verdana, Geneva, sans-serif;
font-size:18px;
text-align:left;
height:50px;
display: table;
width: 100%;
}
#contenu span {
/* Aligne le texte verticalement au milieu */
vertical-align:middle;
display: table-cell;
}