Comment obtenir un texte aligné verticalement au milieu d'une div ?

Aligner du texte verticalement dans une division est possible grâce à HTML est aux styles CSS.

Pour la première méthode (méthode HTML), le texte 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).

Pour aligner verticalement un texte de plusieurs lignes (méthode 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;
}

HTML/CSS

Annonces Google