CSS : à propos de l'alignement vertical

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 :

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

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

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

Le code HTML correspondant

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

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

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

Le code correspondant

<img src ='../images/trikini.jpg' width ='30%' style ="vertical-align: top;"> <img src ='../images/bikini.jpg' width ='30%'style ="vertical-align : top;"> <img src ='../images/noire_bikini.jpg' width ='30%'style ="vertical-align : top;">

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