Die CSS-Eigenschaft "vertical-align"

TP Login

TP Intern

Die CSS-Eigenschaft "vertical-align" - Die vertikale Ausrichtung von Elementen

Da es immer wieder Fragen zu dieser bzw. Probleme mit dieser Thematik gibt, möchte unser Autor prefix die CSS-Eigenschaft "vertical-align" einmal etwas ausführlicher behandeln

Autor:: (prefix)
Arbeitsmaterial:: download
Schwierigkeit:: Einfach

1

Die CSS2-Spezifikation sagt darüber Folgendes:

Wie im Abschnitt über Inline-Formatierungskontexte (9.4.2) beschrieben, führen Benutzerprogramme Inline-Boxen zu einem vertikalen Stapel aus Zeilen-Boxen zusammen. Die Höhe einer Zeilen-Box wird wie folgt ermittelt:

Die Höhe jeder Inline-Box in der Zeilen-Box wird berechnet (siehe Abschnitt 10.6, „Höhen und Ränder berechnen“, und die Beschreibung der line-height'-Eigenschaft).
Die Inline-Boxen werden vertikal gemäß ihrer 'vertical-align'-Eigenschaft ausgerichtet.
Die Höhe der Zeilen-Box ist der Abstand zwischen der oberen Kante der obersten Box und der unteren Kante der untersten Box.

Leere einzeilige Elemente erzeugen leere Inline-Boxen, aber diese Boxen haben dennoch Ränder, Auffüllung, Rahmen und eine Zeilenhöhe und beeinflussen damit diese Berechnungen genauso wie Elemente mit Inhalt.

Beachten Sie, dass die Zeilen-Box genau die Höhe der höchsten Box hat, wenn alle Boxen in der Zeilen-Box ihrer unteren Kante nach ausgerichtet sind. Sind die Boxen dagegen entlang einer gemeinsamen Grundlinie ausgerichtet, kann es sein, dass die obere und untere Kante der Zeilen-Box die untere und obere Kante der höchsten Box nicht berühren.

2

Was bedeutet das nun in der Praxis? Ich hab das mal anhand dieses Beispieles verdeutlicht!

Ich gebe der Klasse "beispiel1" nur ein "vertical-align", der Klasse "beispiel2" zusätzlich ein "line-height" und einer Tabellenzelle (td) ebenfalls nur ein "vertical-align" mit!

CSS


.beispiel1 {
	height: 200px;
	width: 500px;
	background-color: red;
	color: white;
	vertical-align: middle;
}
 
.beispiel2 {
	height: 200px;
	width: 500px;
	background-color: yellow;
	vertical-align: middle;
	line-height: 200px;
}
 
td {
	height: 40px;
	border: 1px solid black;
	vertical-align: top;
}

3

Die Einbindung in XHTML 1.0 sieht wie folgt aus:

HTML


<body>
	<div class="beispiel1">Ohne Angabe von line-height</div>
	<p>Beispiel 2:</p>
	<div class="beispiel2">Mit Angabe von line-height</div>
	<p>Beispiel 3:</p>
	<table width="500" cellspacing="0" cellpadding="0">
		<tr>
			<td>Hier ben&ouml;tigt man</td>
			<td>keine Definition</td>
		</tr>
		<tr>
			<td>von</td>
			<td>line-height</td>
		</tr>
	</table>
</body>

4

Bei der Darstellung kann man nun erkennen, dass:

Beispiel 1 die Definition für "vertical-align" ignoriert - der Text wird oben ausgerichtet, wie das Standard für Container ist;

Beispiel 2 aufgrund der zusätzlichen Definition der "line-height" (gleich hoch wie der Container) den Text korrekt "middle" positioniert! Dies ist jedoch nur "scheinbar" die richtige Interpretation, da "vertical-align" nur auf Inline-Elemente angewendet werden kann;

Beispiel 3 den Text ebenfalls korrekt vertikal oben ausrichtet, allerdings ohne dass es hier einer Defintion der Zeilenhöhe bedarf. (Standardmäßig wird der Text in Tabellenzellen mittig ausgerichtet).

Der Grund liegt darin, dass eine Tabellenzelle im Gegensatz zu einem Container eben nur die Definition "vertical-align" benötigt, nicht aber jene der Zeilenhöhe!

5

Die hier angeführten Beispiele in folgenden Browsern getestet:

- Internet Explorer 6 / Win
- Mozilla Firebird 0.7 / Win
- Netscape 7.0 / Win
- Opera 7.0 / Win
- IE 5.0 / Mac
- Safari / Mac
- Camino / Mac
- Mozilla Firebird / Mac