CSS : à propos de l'alignement vertical

Alignement vertical par défaut

Rappel : par défaut un texte est aligné en haut dans sa boîte.
Par défaut un texte est centré verticalement dans sa cellule.
Voir ci-dessous !

Texte aligné en haut dans la boîte
Un tableau
en-têteen-têteen-tête
donnéedonnéedonnée

Remarquez bien le centrage vertical du texte dans chaque cellule.

Comment centrer verticalement un texte dans sa boîte ?

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

Texte centré verticalement dans la boîte

Le code CSS et HTML correspondant :

... div {width : 40% ; height : 50px ; border :1px solid black; } ... <div> <span style ='line-height :50px;' >Texte centré verticalement dans la boîte</span> </div> ...

Il faut donc que la valeur de la propriété height de la boîte soit égale à la valeur de la propriété line-height de la balise contenant le texte (ici span).

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.
La valeur 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é dans la deuxième cellule et aligné en bas dans la troisième cellule.

Les règles de style relatives aux tableaux

tr {height : 50px ; } td, th {border : 1px solid black; } .haut {vertical-align : top ; } .milieu {vertical-align : middle ;} .bas {vertical-align : bottom; }

Le code HTML du tableau ci-dessus

<table> <caption>Un tableau</caption> <tr><th class ='haut'>référence</th><th class ='milieu'>désignation</th><th class ='bas'>prix unitaire</th></tr> <tr><td class ='haut'>bo12</td><td class ='milieu'>boulons</td><td class ='bas'>10.5</td></tr> <tr><td class ='haut'>vi102</td><td class ='milieu'>vis</td><td class ='bas'>7.5</td></tr> </table>
Retour menu