vertical-align - Propriété CSS
Résumé des caractéristiques de la propriété vertical-align
baseline
| text-bottom
| text-top
| middle
| central
| mathematical
| ideographic
| sub
| center
| super
| bottom
baseline
Description de vertical-align
.
La propriété vertical-align
définit l'alignement vertical d'un élément.
Cette propriété peut être utilisée notamment pour gérer l'alignement vertical du texte dans une cellule
de tableau ou positionner les éléments les uns par rapport aux autres sur une même ligne de texte
(éléments inline
).
Dans ce dernier cas, voici comment interpréter les différentes valeurs :
Une curiosité.
Lorsque la ligne comporte des éléments de tailles différentes, ou lorsque la hauteur de ligne est fixée,
le comportement de la valeur text-top
est inattendu : dans l'exemple ci-dessous, le troisième
élément ne semble pas du tout aligné sur le haut du texte.
La raison est que text-top
aligne par rapport au haut du texte de l'élément lui-même, et non pas
par rapport au haut du texte le plus grand.
Dans l'exemple ci-dessous le trait rouge matérialise le haut de ligne.
Apb
aligné sur top
aligné sur text-top
vertical-align
est maintenant définie comme une propriété raccourcie pour les trois propriétés
alignment-baseline
, baseline-source
et baseline-shift
.
Mais la compatibilité des navigateurs avec ces trois nouvelles propriétés est encore incertaine.
Syntaxes pour vertical-align
.
- vertical-align: baseline;
Valeur par défaut pour l'alignement des balises inline.
La ligne de base de l'élément est alignée sur la ligne de base du parent.Si l'élément n'a pas de ligne de base, c'est à dire s'il ne contient pas de texte, comme une image par exemple, c'est le bas de l'élément qui sert pour l'alignement.
Rappel : la ligne de base du texte si situe au bas des lettres sans jambage.
Aa AaCellule de tableau - vertical-align: top;
Éléments inline : le haut de l'élément est aligné sur le haut du parent.
Cellules de tableau : le contenu est positionné en haut de la cellule.Aa AaCellule de tableau - vertical-align: middle;
Éléments inline : aligne le milieu de l'élément (dans le sens vertical) avec la ligne de base du texte + une demie hauteur des minuscules.
Autrement dit, l'élément est centré verticalement par rapport aux minuscules.Cellules de tableau : le contenu est positionné au milieu de la cellule. C'est la valeur par défaut pour l'alignement des cellules.
Aa AaCellule de tableau - vertical-align: bottom;
Éléments inline : le bas de l'élément est aligné sur le bas du parent.
Cellules de tableau : le contenu est positionné en bas de la cellule.Aa AaCellule de tableau - vertical-align: text-top;
Éléments inline : l'alignement se fait sur le haut du texte.
Cellules de tableau : valeur non gérée.Aa Aa - vertical-align: text-bottom;
Éléments inline : l'alignement se fait sur le bas du texte.
Cellules de tableau : valeur non gérée.Aa Aa - vertical-align: super;
Éléments inline : la ligne de base de l'élément est positionnée comme un exposant du parent.
Cellules de tableau : valeur non gérée.Aa Aa - vertical-align: sub;
Éléments inline :la ligne de base de l'élément est positionnée comme un indice du parent.
Cellules de tableau : valeur non gérée.Aa Aa - vertical-align: 0.2em;
Éléments inline : l'élément est déplacé de la valeur indiquée par rapport à la ligne de base du texte, vers le haut si la valeur est positive et vers le bas pour une valeur négative.
Cellules de tableau : valeur non gérée.La valeur est un nombre positif ou négatif, suivi d'une unité de dimension (voir les unités CSS de dimension). S'il s'agit d'un pourcentage, il est évalué d'après la hauteur de la ligne (
line-height
).Aa Aa - vertical-align:
initial
; vertical-align:inherit
; vertical-align:revert
; vertical-align:revert-layer
; vertical-align:unset
;La valeur initiale est :
.baseline
Dans tous les exemples qui suivent, les éléments bleus sont alignés avec vertical-align
. L'élément Aa
noir sert de référence.
Animation de la propriété vertical-align
.
Un petit exemple visuel utilisant l'animation de la propriété vertical-align
sur une série d'images.
Pour donner cette impression "désordonnée", les animations sur chacune des images ont des durées différentes et
une direction différente également.
Pour que l'amplitude des mouvements soit plus grande, la taille des caractères a été fixée à 2rem
.
Simulateur.
Alignement vertical dans une cellule de tableau |
Prise en charge par les navigateurs (compatibilité).
vertical-align
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
Safari
Safari sur IOS
Samsung Internet
Voir aussi, dans le même module de standardisation que vertical-align
.
Les spécifications CSS éditées par le W3C sont organisées en modules. vertical-align
fait partie du Module CSS - Mise en page en ligne (CSS Inline Layout Module). Les définitions suivantes sont également décrites dans ce même module.