HTML & CSS : à propos de l'alignement vertical

Une boite (élément de type "block") peut contenir des éléments "inline" et en particulier du texte. Comment ce texte s'aligne ?

Alignement vertical par défaut

Exemples

Texte aligné en haut dans sa boite
Un tableau
en-têteen-têteen-tête
donnéedonnéedonnée

Remarquez bien le centrage vertical du texte dans chaque cellule.
Quand à l'alignement horizontal : centrage pour une cellule TH et alignement gauche pour une cellule TD.

Les images qui ont des hauteurs différentes sont alignées verticalement par rapport à la base ce qui n'est pas très joli.

Comment centrer verticalement un texte dans sa boite ?

Ci-dessous le texte est centré verticalement dans sa boite car la hauteur de la ligne unique est égale à la hauteur de la boite.

Texte centré verticalement dans la boite

Le code CSS et HTML correspondant :

Il faut donc que la valeur de la propriété height de la boite soit égale à la valeur de la propriété line-height de la balise contenant le texte (ici span) et que le texte soit monoligne !

Gérer l'alignement vertical du texte dans chaque cellule d'un tableau

La propriété CSS vertical-align permet de gérer l'alignement vertical du texte dans les cellules d'un tableau.
Concernant les cellules de tableau la par défaut de vertical-align est middle.

Exemple de tableau

Un tableau
référencedésignationprix unitaire
bo12boulons10.5
vi102vis7.5

Dans les cellules de la première colonne du tableau ci-dessus le texte est aligné en haut, centré verticalement dans la deuxième cellule et aligné en bas dans la troisième cellule.

Le CSS correspondant

Le code HTML correspondant

Gérer l'alignement vertical des images "inline"

Là encore il faut utiliser la propriété vertical-align.

Le code correspondant

Les images sont alignées verticalement par le haut !
Retour menu