CSS vertical-align Eigenschaft

Definition und Verwendung

Die Eigenschaft vertical-align setzt die vertikale Ausrichtung des Elements fest.

Erklärung

Diese Eigenschaft definiert die vertikale Ausrichtung der Baseline des inline-Elements relativ zur Baseline der Zeile, in der sich das Element befindet. Negative Längenwerte und Prozentsätze sind erlaubt. Dies führt dazu, dass das Element sinkt anstatt zu steigen. In Zellen der Tabelle wird dieser Eigenschaftswert auf die Ausrichtung des Inhalts der Zellen im Zellenrahmen gesetzt.

Weitere Informationen:

CSS-Tutorial:CSS Text

HTML DOM Referenzhandbuch:verticalAlign-Eigenschaft

Beispiel

Vertikale Ausrichtung eines Bildes:

img
  {
  vertical-align:text-top;
  }

Probieren Sie es selbst aus

CSS-Syntax

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

Eigenschaftswert

Wert Beschreibung
Basislinie Standard. Das Element wird auf der Basislinie des übergeordneten Elements positioniert.
sub Vertikale Ausrichtung von Textsubscripts.
super Vertikale Ausrichtung von Textsuperscripten
top Stellt den oberen Rand des Elements mit dem obersten Rand des Elements in der Zeile ausgerichtet.
text-top Stellt den oberen Rand des Elements mit dem oberen Rand der Schrift des übergeordneten Elements ausgerichtet.
middle Platziert dieses Element in der Mitte des übergeordneten Elements.
bottom Stellt den oberen Rand des Elements mit dem untersten Rand des Elements in der Zeile ausgerichtet.
text-bottom Stellt den Untergrund des Elements mit dem Untergrund der Schrift des übergeordneten Elements ausgerichtet.
length 　
% Stellt die Position dieses Elements durch den Prozentsatz der "line-height"-Eigenschaft ein. Negative Werte sind erlaubt.
inherit Legt fest, dass der Wert der Eigenschaft vertical-align vom übergeordneten Element geerbt wird.

Technische Details

Standardwert: Basislinie
Vererbbarkeit: nein
Version: CSS1
JavaScript-Syntax: object.style.verticalAlign="bottom"

Mehr Beispiele

Vertikale Ausrichtung von Bildern
Dieses Beispiel zeigt, wie man Bilder in Text vertikal anordnet.

Browser-Unterstützung

Die Zahlen in der Tabelle weisen auf die erste Browser-Version hin, die die Eigenschaft vollständig unterstützt.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 4.0