Propriété CSS vertical-align

La propriété vertical-align définit l'alignement vertical d'une boîte inline, inline-block ou table-cell. Les éléments de niveau inline comprennent les images, le texte, les boutons et tout élément avec display: inline ou display: inline-block.

Cette page explique où vertical-align s'applique réellement, le modèle de boîte de ligne qui donne du sens à ses valeurs, chaque mot-clé et ce qu'il fait, ainsi que les pièges les plus courants.

Où vertical-align fonctionne

La propriété n'a d'effet que dans deux situations :

À l'intérieur d'une boîte de ligne — pour aligner une boîte inline ou inline-block par rapport à la ligne de texte sur laquelle elle se trouve. Par exemple, aligner une icône <img> avec le texte environnant.
À l'intérieur des cellules de tableau — pour aligner le contenu d'un <td>, d'un <th>, ou de tout élément avec display: table-cell.

En dehors de ces contextes, elle est silencieusement ignorée.

Ce qu'elle ne fait PAS

C'est la plus grande source de confusion : vertical-align ne centre pas les éléments de type bloc. Définir vertical-align: middle sur une <div> ne fait rien. Pour centrer un bloc ordinaire, utilisez Flexbox (align-items: center), Grid, ou margin: 0 auto (horizontal uniquement). Le mot-clé middle, malgré son nom, ne centre qu'une boîte inline par rapport au texte environnant — pas un bloc dans son parent.

Valeur initiale	baseline
S'applique à	Les éléments de niveau inline et table-cell, s'applique également à ::first-letter et ::first-line.
Héritée	Non.
Animable	Non.
Version	CSS1
Syntaxe DOM	object.style.verticalAlign = "middle";

Comment fonctionne vertical-align

Pour bien utiliser cette propriété, il vous faut un modèle mental rapide.

Chaque ligne de texte est disposée à l'intérieur d'une boîte de ligne invisible. Dans cette boîte de ligne, il y a deux lignes de référence importantes :

La ligne de base — la ligne sur laquelle reposent le bas de la plupart des lettres (les lettres comme « g » et « y » descendent en dessous).
La zone de contenu — la boîte em complète de la police, approximativement du haut du glyphe le plus grand au bas du descendeur le plus bas.

La plupart des mots-clés de vertical-align déplacent une boîte par rapport à l'une de ces lignes (baseline, text-top, text-bottom, middle), tandis que top et bottom s'alignent sur les bords de l'ensemble de la boîte de ligne.

Dans une cellule de tableau, les règles sont plus simples : vertical-align contrôle où le contenu de la cellule se trouve dans la hauteur de la cellule, et seuls top, middle, bottom et baseline sont pertinents.

Syntaxe

Syntaxe de la propriété CSS vertical-align

vertical-align: baseline | length | sub | super | top | text-top | middle | bottom | text-bottom | initial | inherit;

Exemple de la propriété vertical-align avec la valeur « sub » :

Exemple de la propriété CSS vertical-align avec la valeur sub

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span {
        vertical-align: sub;
      }
    </style>
  </head>
  <body>
    <h2>Vertical-align property example</h2>
    <p>This is some paragraph with
      <span>vertical-align</span> property.
    </p>
  </body>
</html>

Essayez vous-même »

Résultat

Exemple de la propriété vertical-align avec la valeur « middle » :

Exemple de la propriété CSS vertical-align avec la valeur middle

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span {
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <h2>Vertical-align property example</h2>
    <p>This is some paragraph with
      <span>vertical-align</span> property.
    </p>
  </body>
</html>

Essayez vous-même »

Exemple de la propriété vertical-align avec la valeur « super » :

Exemple de la propriété CSS vertical-align avec la valeur super

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span {
        vertical-align: super;
      }
    </style>
  </head>
  <body>
    <h2>Vertical-align property example</h2>
    <p>This is some paragraph with
      <span>vertical-align</span> property.
    </p>
  </body>
</html>

Essayez vous-même »

Exemple de la propriété vertical-align avec les valeurs « top » et « bottom » :

Exemple de la propriété CSS vertical-align avec les valeurs top et bottom

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        width: 100%;
        border-collapse: collapse;
      }
      table,
      th,
      td {
        border: 1px solid #cccccc;
      }
      td {
        height: 100px;
      }
      .top {
        vertical-align: top;
      }
      .bottom {
        vertical-align: bottom;
      }
    </style>
  </head>
  <body>
    <h2>Vertical-align property example</h2>
    <table>
      <tr>
        <th>Bottom</th>
        <th>Middle</th>
        <th>Top</th>
      </tr>
      <tr>
        <td class="bottom">Some text</td>
        <td>Some text</td>
        <td class="top">Some text</td>
      </tr>
    </table>
  </body>
</html>

Essayez vous-même »

Exemple avec une valeur de longueur (aligner une icône sur le texte)

Une valeur de longueur déplace la boîte vers le haut (valeur positive) ou vers le bas (valeur négative) par rapport à la ligne de base. C'est la méthode la plus propre pour aligner une image ou une icône inline avec le texte adjacent :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .label {
        font-size: 20px;
      }
      .icon {
        width: 18px;
        height: 18px;
        vertical-align: -3px; /* drop it 3px to sit on the text */
      }
    </style>
  </head>
  <body>
    <p class="label">
      <img class="icon" src="https://api.w3docs.com/uploads/media/default/0001/03/4624f58ca574eae0a734eb0d43fd87bc2326a306.png" alt="icon">
      Aligned with the text baseline
    </p>
  </body>
</html>

Pièges courants

L'« espace mystérieux » sous une image. Un <img> autonome à l'intérieur d'un bloc présente souvent quelques pixels d'espace en dessous. C'est parce qu'en tant qu'élément inline, l'image repose sur la ligne de base du texte, laissant de la place pour les descendeurs. Corrigez cela avec vertical-align: bottom (ou middle/top), ou rendez l'image display: block.
middle n'est pas un vrai centrage. vertical-align: middle aligne la boîte sur la ligne de base plus la moitié de la x-height du parent — visuellement proche du centre pour les petites icônes, mais pas exact, et cela ne fait rien pour les éléments de type bloc.
Elle ne s'hérite pas. Chaque boîte doit déclarer son propre vertical-align ; le définir sur un parent n'a aucun effet sur les enfants.
top/bottom dépendent du contenu le plus grand. Ils s'alignent sur la boîte de ligne, donc un seul élément de grande taille sur la ligne peut changer l'emplacement de tout le reste.
Les valeurs de longueur négatives sont autorisées et sont souvent plus prévisibles que les mots-clés pour un alignement précis au pixel des icônes.

Valeurs

Valeur	Descriptions	Essayer
baseline	Aligne la ligne de base de l'élément avec la ligne de base de son parent. C'est la valeur par défaut.	Essayer »
length	Déplace la ligne de base de la boîte vers le haut (valeur positive) ou vers le bas (valeur négative) par rapport à la ligne de base du parent.	Essayer »
sub	Abaisse la ligne de base de la boîte à la position appropriée pour les indices du parent.	Essayer »
super	Élève la ligne de base de la boîte à la position appropriée pour les exposants du parent.	Essayer »
top	Aligne le haut du sous-arbre aligné avec le haut de la boîte de ligne.	Essayer »
text-top	Aligne le haut de la boîte avec le haut de la zone de contenu du parent.	Essayer »
middle	Aligne le point médian vertical de la boîte avec la ligne de base du parent plus la moitié de la x-height du parent.	Essayer »
bottom	Aligne le bas du sous-arbre aligné avec le bas de la boîte de ligne.	Essayer »
text-bottom	Aligne le bas de la boîte avec le bas de la zone de contenu du parent.	Essayer »
initial	Rétablit la valeur par défaut de la propriété.	Essayer »
inherit	Hérite de la propriété depuis l'élément parent.

Pratique

Que fait la propriété CSS 'vertical-align' ?

Elle ajuste le positionnement vertical d'un élément par rapport à sa boîte inline ou table-cell.Elle réaligne horizontalement le contenu d'un élément.Elle s'applique aux éléments de niveau inline et 'table-cell'.Elle ajuste la taille de l'élément.

Propriétés associées

text-align — alignement horizontal du contenu inline.
line-height — définit la hauteur de la boîte de ligne contre laquelle top/bottom s'alignent.
display — basculer entre inline, inline-block, block et table-cell.