vertical-align

Die CSS Eigenschaft vertical-align bestimmt die vertikale Ausrichtung in inline Elementen oder in Tabellenzellen.

Die vertical-align Eigenschaft kann in zwei AnwendungsfÀllen genutzt werden:

  • Um die Box eines inline-Elements vertikal in der beinhaltenden Box auszurichten. Beispielsweise kann sie eingesetzt werden um die ein <img> in einer Textzeile vertikal auszurichten:

  • Um den Inhalt einer Zelle vertikal in einer Tabelle auszurichten:

Beachte, dass sich vertical-align nur auf inline- und Tabellenzellenelemente bezieht: es kann nicht eingesetzt werden um Block-level Elemente auszurichten.

Syntax

/* SchlĂŒsselwörter */
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;

/* <length> Werte */
vertical-align: 10em;
vertical-align: 4px;

/* <percentage> Werte */
vertical-align: 20%;

/* Globale Werte */
vertical-align: inherit;
vertical-align: initial;
vertical-align: unset;

Bei Elementen, die keine Grundlinie besitzen, beziehen sich die Angaben auf die untere Ă€ußere Kante (bottom margin edge).

Werte fĂŒr inline-Elemente

Eltern-Elemente

Diese Werte richten das Element vertikal relativ zu seinem ĂŒbergeordneten Element aus:

baseline
Die Grundlinie des Elements liegt auf der Grundlinie des Elternelements.
sub
Das Element ist tiefgestellt.
super
Das Element ist hochgestellt.
text-top
Die Oberkante des Elements liegt auf der Oberkante der Schrift des Elternelements.
text-bottom
Die Unterkante des Elements liegt auf der Unterkante der Schrift des Elternelements.
middle
Die Mitte des Elements liegt auf der Mitte der Kleinbuchstaben des Elternelements.
top
Die Oberkante des Elements liegt auf der Oberkante des Elternelements.
bottom
Die Unterkante des Elements liegt auf der Unterkante des Elternelements.
<percentage>
Die Unterkante des Elements liegt um einen prozentualen Wert höher als die Unterkante des Elternelements. Die Anteile beziehen sich auf den Wert der line-height Eigenschaft.
<length>
Die Unterkante des Elements liegt um einen bestimmten Wert höher als die Unterkante des Elternelements. Negative Werte sind erlaubt.
inherit
Der Wert des Elternelements wird geerbt.

Werte fĂŒr Tabellenzellen

baseline, sub, super, text-top, text-bottom, <Prozentzahl> und <LĂ€nge>
Die Grundlinie des Elements liegt auf der Grundlinie des Elternelements
top
Die Oberkante der Textzeile liegt auf der Oberkante der Tabellenzelle.
middle
Die vertikale Mitte der Textzeile liegt auf der Mitte der Tabellenzelle.
bottom
Die Unterkante der Textzeile liegt auf der Unterkante der Tabellenzelle.
inherit
Der Wert des Elternelements wird geerbt.

Formale Syntax

baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length>

Beispiel

HTML

<div>Ein <img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> Bild mit default Ausrichtung.</div>
<div>Ein <img class="top" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> Bild mit text-top Ausrichtung.</div>
<div>Ein <img class="bottom" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> Bild mit text-bottom Ausrichtung.</div>
<div>Ein <img class="middle" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> Bild mit middle Ausrichtung.</div>

CSS

img.top { vertical-align: text-top; }
img.bottom { vertical-align: text-bottom; }
img.middle { vertical-align: middle; }

Ergebnis

Spezifikation

Spezifikation Status Kommentar
CSS Transitions
Die Definition von 'vertical-align' in dieser Spezifikation.
Arbeitsentwurf Definiertvertical-align als animierbar.
CSS Level 2 (Revision 1)
Die Definition von 'vertical-align' in dieser Spezifikation.
Empfehlung FĂŒgt den <length> Wert hinzu und erlaubt die Anwendung auf Elemente mit table-cell display-Typ.
CSS Level 1
Die Definition von 'vertical-align' in dieser Spezifikation.
Empfehlung EinfĂŒhrung.

Initialwertbaseline
Anwendbar aufInline- und table-cell Elemente. Auch anwendbar auf ::first-letter (en-US) und ::first-line (en-US).
VererbtNein
Prozentwertebezieht sich auf die line-height (en-US) des Elements selbst
Berechneter WertfĂŒr Prozentwerte und LĂ€ngenwerte die absolute LĂ€nge, ansonsten das SchlĂŒsselwort wie angegeben
AnimationstypLĂ€ngenangabe

BrowserkompatibilitÀt

BCD tables only load in the browser

Siehe auch