vertical-align

Springen zu:
  1. Syntax
  2. Beispiel
  3. Spezifikation
  4. Browserkompatibilität
  5. Siehe auch

Die vertical-align CSS Eigenschaft 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

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.
<Prozentzahl>
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.
<Länge>
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 und ::first-line.
VererbtNein
Prozentwertebezieht sich auf die line-height des Elements selbst
Medienvisuell
Berechneter Wertfür Prozentwerte und Längenwerte die absolute Länge, ansonsten das Schlüsselwort wie angegeben
AnimationstypLängenangabe
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

Browserkompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
vertical-alignChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1IE Vollständige Unterstützung 4Opera Vollständige Unterstützung 4Safari Vollständige Unterstützung 1WebView Android Vollständige Unterstützung 1Chrome Android Vollständige Unterstützung 18Edge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung 1Samsung Internet Android Vollständige Unterstützung Ja

Legende

Vollständige Unterstützung  
Vollständige Unterstützung

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter: 
Mitwirkende an dieser Seite: nw520, iGadget, Artjom, fscholz, SJW, patpir, Michael2402
Zuletzt aktualisiert von: nw520,