vertical-align

  • Raccourci de la révision : CSS/vertical-align
  • Titre de la révision : vertical-align
  • ID de la révision : 334045
  • Créé :
  • Créateur : FredB
  • Version actuelle ? Non
  • Commentaire

Contenu de la révision

{{ CSSRef() }}

Résumé

La propriété vertical-align définit l'alignement vertical d'un élément en ligne ou d'une cellule de tableau.

  • {{Xref_cssinitial}} ligne de base
  • S'applique à éléments en ligne et cellules de tableau
  • {{Xref_cssinherited}}  non
  • Media {{Xref_cssvisual}}
  • {{Xref_csscomputed}}

Syntaxe

vertical-align: baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length> | {{ Cssxref("inherit") }}

Valeurs (pour les éléments en ligne)

La plupart de ces valeurs alignent l'élément par rapport à son élément parent :

baseline 
Aligne la base de l'élément avec celle de son parent.
sub 
Aligne la base de l'élément avec la ligne de base indice de son parent.
super 
Aligne la base de l'élément avec la ligne de base exposant de son parent.
text-top 
Aligne le haut de l'élément avec le haut de la fonte de l'élément parent.
text-bottom 
Aligne le bas de l'élément avec le bas de la fonte de l'élément parent.
middle 
Aligne le milieu de l'élément avec le milieu des lettres bas de casse de son parent.
<length>
Aligne la base de l'élément à la longueur donnée au-dessus de la ligne de base de son parent.
<percentage> 
Idem à la valeur <length>, où le pourcentage est calculé par rapport à la propriété {{ Cssxref("line-height") }}.

Pour les éléments n'ayant pas de ligne de base, c'est la marge basse qui est utilisée comme référence.

Cependant, deux valeurs alignent verticalement l'élément par rapport à une ligne entière, plutôt que par rapport à son parent :

top 
Aligne le haut de l'élément et de ses descendants avec le haut de la ligne entière.
bottom 
Aligne la bas de l'élément et de ses descendants avec le bas de la ligne entière.

Les valeurs négatives sont autorisées.

Valeurs (pour les cellules de tableau)

baseline (et sub, super, text-top, text-bottom, <length> et <percentage>) 
Aligne la ligne de base de la cellule avec la base des toutes les autres cellules de la rangée, qui sont alignées par rapport à la ligne de base.
top 
Aligne le haut du padding de la cellule avec le haut de la rangée.
middle 
Centre la boîte padding de la cellule avec la rangée.
bottom 
Aligne le bas du padding de la cellule avec le bas de la rangée.

Les valeurs négatives sont autorisées.

Exemples

img {
       vertical-align: bottom;
}

Spécifications

Compatibilité des navigateurs

Voir également

{{ Cssxref("line-height") }}, {{ Cssxref("text-align") }}, {{ Cssxref("margin") }} (auto)

Source de la révision

<p>{{ CSSRef() }}</p>
<h2 id="R.C3.A9sum.C3.A9">Résumé</h2>
<p>La propriété <code>vertical-align</code> définit l'alignement vertical d'un élément en ligne ou d'une cellule de tableau.</p>
<ul class="cssprop">
  <li><dfn>{{Xref_cssinitial}} </dfn>ligne de base</li>
  <li><dfn>S'applique à&nbsp;</dfn>éléments en ligne et cellules de tableau</li>
  <li><dfn>{{Xref_cssinherited}}&nbsp;</dfn> non</li>
  <li><dfn>Media </dfn>{{Xref_cssvisual}}</li>
  <li><dfn>{{Xref_csscomputed}} </dfn></li>
</ul>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="eval">
vertical-align: baseline | sub | super | text-top | text-bottom | middle | top | bottom | &lt;percentage&gt; | <a href="fr/CSS/length">&lt;length&gt;</a> | {{ Cssxref("inherit") }}
</pre>
<h3 id="Valeurs_.28pour_les_.C3.A9l.C3.A9ments_en_ligne.29">Valeurs (pour les éléments en ligne)</h3>
<p>La plupart de ces valeurs alignent l'élément par rapport à son élément parent&nbsp;:</p>
<dl>
  <dt>
    baseline&nbsp;</dt>
  <dd>
    Aligne la base de l'élément avec celle de son parent.</dd>
  <dt>
    sub&nbsp;</dt>
  <dd>
    Aligne la base de l'élément avec la ligne de base <i>indice</i> de son parent.</dd>
  <dt>
    super&nbsp;</dt>
  <dd>
    Aligne la base de l'élément avec la ligne de base <i>exposant</i> de son parent.</dd>
  <dt>
    text-top&nbsp;</dt>
  <dd>
    Aligne le haut de l'élément avec le haut de la fonte de l'élément parent.</dd>
  <dt>
    text-bottom&nbsp;</dt>
  <dd>
    Aligne le bas de l'élément avec le bas de la fonte de l'élément parent.</dd>
  <dt>
    middle&nbsp;</dt>
  <dd>
    Aligne le milieu de l'élément avec le milieu des lettres bas de casse de son parent.</dd>
  <dt>
    <a href="fr/CSS/length">&lt;length&gt;</a></dt>
  <dd>
    Aligne la base de l'élément à la longueur donnée au-dessus de la ligne de base de son parent.</dd>
  <dt>
    &lt;percentage&gt;&nbsp;</dt>
  <dd>
    Idem à la valeur <code>&lt;length&gt;</code>, où le pourcentage est calculé par rapport à la propriété {{ Cssxref("line-height") }}.</dd>
</dl>
<p>Pour les éléments n'ayant pas de ligne de base, c'est la marge basse qui est utilisée comme référence.</p>
<p>Cependant, deux valeurs alignent verticalement l'élément par rapport à une ligne entière, plutôt que par rapport à son parent&nbsp;:</p>
<dl>
  <dt>
    top&nbsp;</dt>
  <dd>
    Aligne le haut de l'élément et de ses descendants avec le haut de la ligne entière.</dd>
  <dt>
    bottom&nbsp;</dt>
  <dd>
    Aligne la bas de l'élément et de ses descendants avec le bas de la ligne entière.</dd>
</dl>
<p>Les valeurs négatives sont autorisées.</p>
<h3 id="Valeurs_.28pour_les_cellules_de_tableau.29">Valeurs (pour les cellules de tableau)</h3>
<dl>
  <dt>
    baseline (et sub, super, text-top, text-bottom, &lt;length&gt; et &lt;percentage&gt;)&nbsp;</dt>
  <dd>
    Aligne la ligne de base de la cellule avec la base des toutes les autres cellules de la rangée, qui sont alignées par rapport à la ligne de base.</dd>
  <dt>
    top&nbsp;</dt>
  <dd>
    Aligne le haut du <code>padding</code> de la cellule avec le haut de la rangée.</dd>
  <dt>
    middle&nbsp;</dt>
  <dd>
    Centre la boîte <code>padding</code> de la cellule avec la rangée.</dd>
  <dt>
    bottom&nbsp;</dt>
  <dd>
    Aligne le bas du <code>padding</code> de la cellule avec le bas de la rangée.</dd>
</dl>
<p>Les valeurs négatives sont autorisées.</p>
<h2 id="Exemples">Exemples</h2>
<pre class="eval">
img {
       vertical-align: bottom;
}
</pre>
<h2 id="Sp.C3.A9cifications" name="Sp.C3.A9cifications">Spécifications</h2>
<ul>
  <li><a class="external" href="http://www.yoyodesign.org/doc/w3c/css1/#vertical-align">CSS 1 (Fr)</a></li>
  <li><a class="external" href="http://www.yoyodesign.org/doc/w3c/css2/visudet.html#propdef-vertical-align">CSS 2 (Fr)</a></li>
  <li><a class="external" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align">CSS 2.1</a></li>
</ul>
<h2 id="Compatibilit.C3.A9_des_navigateurs">Compatibilité des navigateurs</h2>
<h2 id="Voir_.C3.A9galement">Voir également</h2>
<p>{{ Cssxref("line-height") }}, {{ Cssxref("text-align") }}, {{ Cssxref("margin") }} (<code>auto</code>)</p>
Revenir à cette révision