CSS: Comment aligner verticalement du texte dans un div? (ou tout autre élément qui n'est pas une table)

Question

Pour aligner verticalement un texte dans une cellule de tableau, j'utilise vertical-align: middle dans le td.

Mais ce qui précède ne fonctionne pas avec divs, span, en-tête et autres éléments non-table. Alors, comment puis-je aligner verticalement du texte dans de tels éléments?

Answer 1

Il y a beaucoup de possibilités, chacune avec ses avantages et ses inconvénients.

Voici un good article par Douglas Heriot expliquant 5 autres méthodes, et en les comparant.

Answer 2

Il suffit d'utiliser le style suivant:

<style type="text/css"> 
    div { 
      vertical-align: middle; 
      display: table-cell; 
     } 
</style> 

De cette façon, vous « displaying » la div comme une table de cellules et depuis vertical-align travaille avec des cellules de tableau, vous êtes texte sera centre verticalement aligné.

Answer 3

S'il s'agit d'une seule ligne de texte, vous pouvez définir la hauteur de ligne à la même hauteur que l'élément.