w3docs logo

Propriété CSS vertical-align

La propriété vertical-align spécifie l'alignement vertical d'un élément en ligne (inline).

La propriété vertical-align ne fonctionne que sur les éléments en ligne ou les éléments en lignes de bloc et les cellules de tableaux. Les éléments en lignes comprennent des images, texte, boutons, etc.

La propriété vertical-align est utilisée pour aligner le contenu à l'intérieur des cellules de tableaux (<td>) et des éléments avec display: table-cell.

Valeur initiale baseline
Appliquée à Éléments en ligne et à ceux qui sont des cellules de tableau, s'applique aussi à ::first-letter et ::first-line.
Héritée Non.
Animable Oui. L'alignement vertical est animable.
Version CSS1
Syntaxe DOM object.style.verticalAlign = "middle";

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      span {
      vertical-align: sub;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété vertical-align</h2>
    <p>C'est quelque paragraphe avec la propriété <span>vertical-align</span>.</p>
  </body>
</html>

Ici, la valeur "middle" est utilisée:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      span {
      vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété vertical-align</h2>
    <p>C'est quelque paragraphe avec la propriété <span>vertical-align</span>.</p>
  </body>
</html>

Un autre exemple avec la valeur "super":

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      span {
      vertical-align: super;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété vertical-align</h2>
    <p>C'est quelque paragraphe avec la propriété <span>vertical-align</span>.</p>
  </body>
</html>

Un exemple qui affiche comment les valeurs "top" et "bottom" fonctionnent:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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>Exemple de la propriété vertical-align </h2>
    <table>
      <tr>
        <th>Bas</th>
        <th>Milieu</th>
        <th>Haut</th>
      </tr>
      <tr>
        <td class="bottom">Quelque texte</td>
        <td>Quelque texte</td>
        <td class="top">Quelque texte</td>
      </tr>
    </table>
  </body>
</html>

Valeurs

Valeur Description
baseline Aligne la ligne de base de l'élément avec la ligne de base de son parent. C'est la valeur initiale.
length Relève (valeur positive) ou abaisse (valeur négative) la boîte de cette distance. Valeurs négatives sont autorisées.
sub Abaisse la ligne de base de la boîte à la propre position pour les indices de la boîte du parent.
super Relève la ligne de base de la boîte à sa propre position pour les indices de la boîte du parent.
top Aligne le haut du sous-arbre aligné avec le haut de la boîte de lignes.
text-top Aligne le haut de la boîte avec le haut de la zone de contenu du parent.
middle Aligne le milieu de l'élément avec la hauteur donnée par la ligne de base de l'élément parent à laquelle on ajoute la moitié de sa hauteur.
bottom Aligne le bas du sous-arbre aligné avec le haut de la boîte de lignes.
text-bottom Aligne le bas de la boîte avec le bas de la zone de contenu du parent.
initial Fait utiliser la valeur initiale.
inherit Hérite la propriété de son élément parent.

Support de Navigateurs

chrome firefox safari opera
1.0+ 1.0+ 1.0+ 4.0+

Pratiquez vos connaissances

Comment utiliser la propriété 'vertical-align' en CSS?
Trouvez-vous cela utile?