Inhalte mit vertical-align ausrichten

Wenn man Websites entwickelt, dann steht man häufig vor der Aufgabe, Inhalte vertikal auszurichten, z.B. mittig oder unten. Die Eigenschaft vertical-align kann auf Inline-Elemente (auch auf Tabellenzellen, ::first-letter und ::first-line möglich) angewendet werden, um Inhalte vertikal auszurichten. Allerdings erfolgt die Ausrichtung nicht innerhalb der Zeilenhöhe des Elements an sich, die mit line-height angegeben wird, sondern innerhalb der line-box.

Die Syntax für die Eigenschaft vertical-align ist nachfolgend mit einem Beispiel abgebildet.

Für Inline-Elemente wird mit der Eigenschaft line-height eine Zeilenhöhe angegeben. Eine Zeile kann jedoch mehrere Inline-Elemente mit unterschiedlichen Zeilenhöhen enthalten. Die obere Linie der line-box wird mit der am höchsten liegenden Kante eines Elements gebildet und die untere Linie mit der Kante des Elements, das am tiefsten liegt.

Daneben muss man beachten, dass sowohl die Elemente, als auch die line-box eine Grundlinie haben. In den Spezifikationen ist nicht genau beschrieben, wo genau die Grundlinie der line-box positioniert ist. Es ist somit variabel und der Browser muss die Position der Grundlinie kalkulieren, damit die Bedingungen für alle Elemente erfüllt sind. Auch wenn die Position nicht genau definiert ist, gibt es einen starken Zusammenhang zwischen der Grundline der line-box und dem Element mit der größten Schrift bzw. Zeilenhöhe, da dadurch alle Elemente an der Grundlinie ausgerichtet werden können.

Die line-box ist demnach die gemeinsame Box aller Elemente einer Zeile. Auf der folgenden Abbildung würde das bedeuten, dass sich die Höhe der line-box und die Grundlinie an dem höchsten Element mit der Nr. 2 orientiert. Bedeutend hierbei ist, dass die vertikale Ausrichtung mit vertical-align beim Element mit der Nr. 2 keinen Effekt zeigt, jedoch bei den übrigen Elementen, die eine geringere Zeilenhöhe haben. Das ist dem Umstand geschuldet, dass das Element mit der Nr. 2 keinen Platz hat, um nach oben oder unten verschoben zu werden, da die Höhe genauso groß ist wie die line-box. Man benötigt also einen gewissen Raum, um vertikal ausgerichtet werden zu können. In diesem Beispiel trifft das auf Nr. 1 und 3 zu und können ausgerichtet werden.

Um die line-box zu komplettieren, sind bei der folgenden Abbildung noch zwei weitere Linien hinzugekommen. Das sind die Linien text-top und text-bottom. Diese ergeben sich aus der oberen und unteren Kante der Schriftgröße des Elternelements, in dem sich die line-box befindet. Außerdem sind beim Inline-Element die äußeren Linien oben und unten (top und bottom) hinzugekommen, die ebenfalls wichtig sind und sich aus der Zeilenhöhe des Elements ergeben.

Das Inline-Element kann mit den Bezugslinien innerhalb der line-box an dessen Bezugslinien positioniert werden. Man stellt somit über die Eigenschaft vertical-align einen Bezug zwischen den Linien des Inline-Elements und den Linien der line-box her. Gibt man beispielsweise für das Inline-Element die CSS-Regel vertical-align: baseline; an, dann wird die Grundlinie des Inline-Elements auf der Höhe der Grundlinie der line-box positioniert.

Bei der Angabe der Werte hat man bei Inline-Elementen viele Möglichkeiten. Diese sind nachfolgend aufgeführt.

Keyword-Werte

• bottom (Unterkante des Inline-Elements liegt an der Unterkante der line-box)
• text-top (Oberkante des Inline-Elements liegt auf der Höhe von text-top)
• middle (Inline-Element wird vertikal mittig ausgerichtet)
• baseline (Grundlinie des Inline-Elements liegt auf der Grundlinie der line-box)
• sub (Grundlinie des Inline-Elements liegt etwas unterhalb der Grundline von der line-box)
• text-bottom (Unterkante des Inline-Elements liegt auf der Höhe von text-bottom)
• super (Grundlinie des Inline-Elements liegt etwas oberhalb der Grundline von der line-box)
• top (Oberkante des Inline-Elements liegt an der Oberkante der line-box)
• inherit (Geerbt vom Elternelement)

Numerische Werte mit Einheit

• <Zahl>px (Pixel)
• <Zahl>% (Unterkante wird um den Prozentwert nach oben verschoben, der sich auf die Zeilenhöhe des Elements bezieht)
• <Zahl>em (relative Schriftgröße des Elternelements, beginnend vom Standard des Geräts)
• <Zahl>rem (1rem entspricht der Größe, die für das Wurzelelement html gilt)
• <Zahl>ex (1ex entspricht der Größe des Kleinbuchstabens x, falls es definiert wurde, ansonsten 0.5em)
• <Zahl>ch (1ch entspricht der Breite der Ziffer 0, falls es definiert wurde, ansonsten Durchschnittsbreite aller Zeichen)
• <Zahl>vw (1vw entspricht 1% der Anzeigebreite)
• <Zahl>vh (1vh entspricht 1% der Anzeigehöhe)
• <Zahl>vmin (der kleinere Wert von vw oder vh)
• <Zahl>vmax (der größere Wert von vw oder vh)
• <Zahl>pt (Punkt)
• <Zahl>pc (Pica)
• <Zahl>in (Inch)
• <Zahl>mm (Millimeter)
• <Zahl>cm (Zentimeter)

Der Effekt der Keyword-Werte ist nachfolgend abgebildet.

Wenn die Höhe der line-box so hoch ist wie das Element mit der größten Zeilenhöhe, dann hat eine Ausrichtung mit vertical-align bei dem Element mit der größten Zeilenhöhe kaum eine Auswirkung, da kein Platz vorhanden ist, um nach oben oder unten verschoben zu werden. Allerdings hat es Auswirkungen auf die Nachbarelemente in der Zeile, da die Grundlinie verschoben wird.

Auf der folgenden Abbildung wird das Verhalten ersichtlich. Beim ersten Bild links sind beide Elemente auf der Grundlinie. Ändert man mit vertical-align die Ausrichtung beim Element mit dem großen Text, verschiebt sich die Grundlinie und das Element mit dem kleinen Text verschiebt sich dadurch ebenfalls, da es auf der Grundlinie ausgerichtet ist.

Die line-box ist nur so hoch wie notwendig. Auf der linken Seite der folgenden Abbildung sind die ersten beiden Elemente mit text-bottom und text-top ausgerichtet. Das dritte Element hat den Wert middle. Die Boxgröße erhöht sich dadurch nicht, da es nicht notwendig ist. Auf der rechten Seite der Abbildung hat das dritte Element den Wert 100%. Das sorgt dafür, dass sich das Element nach oben verschiebt und das bewirkt wiederum, dass sich die Boxgröße ändert.