Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

CSS - Propriété vertical-align

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 :

CSS Vertical-Align

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

Syntaxes pour vertical-align.

  • vertical-align: baseline;
    Ligne de texte :

    Apt Exemple pour un alignement sur baseline Exemple pour un alignement sur baseline
    Cellule de tableau

    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.

    Définition de la ligne de base (baseline)

  • vertical-align: top;
    Ligne de texte :

    Apt Exemple pour un alignement sur top Exemple pour un alignement sur top
    Cellule de tableau

    É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.

  • vertical-align: text-top;
    Ligne de texte :

    Apt Exemple pour un alignement sur text-top Exemple pour un alignement sur text-top
    Cellule de tableau

    Éléments inline : l'alignement se fait sur le haut du texte.
    Cellules de tableau : valeur non gérée.

  • vertical-align: middle;
    Ligne de texte :

    Apt Exemple pour un alignement sur middle Exemple pour un alignement sur middle
    Cellule de tableau

    É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.

    Alignement par le milieu

    Cellules de tableau : le contenu est positionné au milieu de la cellule. C'est la valeur par défaut pour l'alignement des cellules.

  • vertical-align: text-bottom;
    Ligne de texte :

    Apt Exemple pour un alignement sur text-bottom Exemple pour un alignement sur text-bottom
    Cellule de tableau

    Éléments inline : l'alignement se fait sur le bas du texte.
    Cellules de tableau : valeur non gérée.

  • vertical-align: bottom;
    Ligne de texte :

    Apt Exemple pour un alignement sur bottom Exemple pour un alignement sur bottom
    Cellule de tableau

    É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.

  • vertical-align: super;
    Ligne de texte :

    Apt Exemple pour un alignement sur super Exemple pour un alignement sur super
    Cellule de tableau

    É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.

  • vertical-align: sub;
    Ligne de texte :

    Apt Exemple pour un alignement sur sub Exemple pour un alignement sur sub
    Cellule de tableau

    É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.

  • vertical-align: 0.1em;
    Ligne de texte :

    Apt Exemple pour un alignement sur une valeur Exemple pour un alignement sur une valeur
    Cellule de tableau

    É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 de dimensions en CSS). S'il s'agit d'un pourcentage, il est évalué d'après la hauteur de la ligne (line-height).

  • vertical-align: initial;

    La valeur initiale est baselilne pour les éléments inline,
    et middle pour les cellules de tableau.

  • vertical-align: unset; vertical-align: inherit;

    Reportez-vous à la description générale de ces valeurs.

Simulateur.

vertical-align :
Alignement vertical d'une balise span dans une ligne de texte.
Abp texte
Alignement vertical d'une image dans une ligne de texte.
Abp Alignement vertical avec vertical-align
Alignement vertical dans une cellule de tableau

Voir aussi...

Propriétés spécifiques aux tableaux - Propriétés.