Comment aligner verticalement plusieurs éléments dans une div ?

L'alignement d'un élément HTML dans une page se gère facilement à l'horizontale. C'est nettement plus difficile pour l'alignement vertical.

Il existe plusieurs solutions et différentes propriétés pour gérer l'alignement vertical dans une page HTML. Tout dépend de l'affichage de l'élément, c'est-à-dire la valeur de la propriété display, ainsi que de l'élément à centrer.

Le langage CSS possède la propriété vertical-align qui permet de centrer un élément. Cependant, cette propriété ne peut s'appliquer qu'aux éléments qui s'affichent en ligne, c'est-à-dire qui ont comme valeur inline pour la propriété display. Cela peut être lié à la nature de l'élément, comme pour une balise <span>, ou bien avec une modification de la propriété. De plus, l'alignement vertical ne s'applique pas sur la taille du container mais sur la taille de la ligne.

<div id=container style=line-height:10px;>
 <span id=contenu style=vertical-align:middle>Je suis centré verticalement</span>
</div>

Une autre solution consiste à utiliser la propriété position. Cette propriété définit la manière dont est positionné l'élément. Pour le container, définissez la valeur de la position sur relative afin que le contenu soit positionné par rapport à cet élément. La position du contenu doit être définie avec absolute. Vous devez ensuite définir une marge haute égale à la moitié de la hauteur du container, avec la propriété top:50%. Pour que le contenu soit centré, la valeur de la propriété margin-top doit être négative et correspondre à la moitié de sa hauteur. De cette manière, le contenu sera automatiquement centré.

<div id=container style=position:relative;>
 <div id=contenu style=position:absolute;top:50%;margin-top:-10px;height;20px;>Je suis centré verticalement</div>
</div>

Si votre contenu est situé sur une seule ligne et que le container possède une hauteur fixe, vous pouvez définir une hauteur de ligne égale à la hauteur de l'élément grâce à la propriété line-height. Le texte contenu sur une seule ligne sera alors automatiquement centré.

<div id=container style=height:40px;line-height:40px;>
 <div id=contenu>Je suis centré verticalement s'il n'y a qu'une ligne</div>
</div>

Il existe une solution pour les autres cas. Dans le langage HTML, le contenu d'une cellule d'un tableau peut être centré horizontalement ou verticalement. Il est possible de faire en sorte que le container utilise le même système d'affichage. Pour cela, il faut attribuer la valeur table à la propriété display du container et la valeur table-cell pour le contenu. La propriété vertical-align permet alors d'aligner verticalement le contenu.

<div id=container style=display:table;>
 <div id=contenu style=display:table-cell;vertical-align:middle;>Je suis centré verticalement</div>
</div>