vertical-align

(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)

Die Eigenschaft vertical-align beschreibt die vertikale Ausrichtung von Text und anderen Inline-Inhalten in einem HTML-Element. Auch die vertikale Ausrichtung von Inhalten in einer Tabelle kann so festgelegt werden.

Vererbt: nein

Siehe auch: text-align

Werte

Die folgenden Konstanten richten Text und andere Inline-Inhalte unter Berücksichtigung der Schriftgröße des übergeordneten Elements aus:

  • baseline: Richtet den Inhalt im betreffenden Element so aus, dass sich seine Grundlinie (Anmerkung: Die Grundlinie eines Textes ist die imaginäre Linie, auf der er geschrieben wird. Die Unterseiten der Buchstaben liegen auf ihr, die Unterlängen überschreiten sie nach unten.) auf der Grundlinie des übergeordneten Elements befindet. Besitzt der Inhalt keine Grundlinie (zum Beispiel bei einem Bild), wird der untere Rand des Inhalts an der Grundlinie der Schrift des übergeordneten Elements ausgerichtet.
  • middle: Richtet den Inhalt im betreffenden Element so aus, dass sich sein vertikaler Mittelpunkt auf der halben x-Höhe (Anmerkung: Die x-Höhe ist die Maßeinheit für die durchschnittliche Höhe der Kleinbuchstaben einer Schrift.) des übergeordneten Elements befindet.
  • sub: Richtet den Inhalt im betreffenden Element so aus, dass sich seine Grundlinie etwas unterhalb der Grundlinie des übergeordneten Elements befindet. Der Text wird dadurch tiefergestellt. Die Darstellung lässt sich leicht optimieren, indem man für den Text eine kleinere Schriftgröße definiert.
  • super: Richtet den Inhalt im betreffenden Element so aus, dass sich seine Grundlinie etwas oberhalb der Grundlinie des übergeordneten Elements befindet. Text wird dadurch höhergestellt. Die Darstellung lässt sich leicht optimieren, indem man für den Text eine kleinere Schriftgröße definiert.
  • text-bottom: Richtet den Inhalt im betreffenden Element so aus, dass sich sein unterer Rand am unteren Rand des übergeordneten Elements befindet, unabhängig von der tatsächlichen Zeilenhöhe.
  • text-top: Richtet den Inhalt im betreffenden Element so aus, dass sich sein oberer Rand am oberen Rand des übergeordneten Elements befindet, unabhängig von der tatsächlichen Zeilenhöhe.

Mit CSS-Maßangaben und Prozentwerten wird die vertikale Ausrichtung von Inline-Inhalten wie folgt bestimmt:

  • CSS-Maßangabe: Eine CSS-Maßangabe verschiebt die Grundlinie des Inhalts (oder des unteren Rands, wenn keine Grundlinie existiert), ausgehend von der Basislinie des übergeordneten Elements, mit positiven Werten nach oben und mit negativen Werten nach unten.
  • Prozentwert: Ein Prozentwert verschiebt die Grundlinie des Inhalts (oder des unteren Rands, wenn keine Grundlinie existiert) mit prozentualem Anteil der Zeilenhöhe des übergeordneten Elements mit positiven Werten nach oben und mit negativen Werten nach unten.

Die folgenden Konstanten richten Text und andere Inline-Inhalte unter Berücksichtigung der Zeilenhöhe des übergeordneten Elements aus. Die Ergebnisse können sich von denen der anderen, an der Schriftgröße ausgerichteten Konstanten erheblich unterscheiden:

  • bottom: Richtet den Inhalt im betreffenden Element so aus, dass sich sein unterer Rand am unteren Rand der Zeile des übergeordneten Elements befindet.
  • top: Richtet den Inhalt im betreffenden Element so aus, dass sich sein oberer Rand am oberen Rand der Zeile des übergeordneten Elements befindet.

In der Deklaration für Tabellenzellen verhalten sich sub, super, text-bottom und text-top wie baseline. Die Konstanten bottom, middle und top beziehen sich auf die Box der Tabellenzelle, baseline bezieht sich auf die Grundlinie der Tabellenzeile.

Standardwert: baseline

Kompatibilität

CSS-Version: 1 (CSS-Maßangaben seit CSS2)

Funktioniert in Internet Explorer ab Version 4, Opera und Mozilla (einschließlich Netscape ab Version 6).

Der Internet Explorer für Windows bis Version 5 unterstützt nur baseline, sub und super. Version 5.5 funktioniert zwar mit allen Konstanten, allerdings nur für Elemente, die das HTML-Attribut valign unterstützen (zum Beispiel Tabellenzellen). Der Internet Explorer für Windows unterstützt für vertical-align generell keine CSS-Maßangaben oder Prozentwerte.

Beispiel

Folgende Stilregel richtet alle Tabellenüberschriften (th) an der vertikalen Mitte der Tabellenzellen aus, in denen sie stehen:

th {
 vertical-align: middle;
}

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright © 2006 der deutschen Übersetzung dpunkt.verlag GmbH
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

dpunkt.verlag GmbH, Ringstraße 19, 69115 Heidelberg