Aktuelles

Startseite
TP Wettbewerbe
Sitemap

Service

Hilfe-Forum
Kolumnen
Linktipps
Buchrezensionen
Traum-Team
Newsletter

Traumquelle

Dreamweaver
Fireworks
Photoshop
Flash
Traum-Start
gimp
GoLive
php / Apache
Sonstige
Grundlagen
Usability
CSS
Apple / Mac
3D

Intern

TP-Sponsor
TP SHOP
Bild Galerie
TP Wallpapers
Forum-Archiv
Link zu uns
Impressum

TP Portal > CSS > Die CSS-Eigenschaft "vertical-align"

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

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.

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

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;
}

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!

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>

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!

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

Fazit:

Vertical-Align funktioniert nur einwandfrei, wenn man dieses auf Tabellenzellen anwendet! Container (Block-Level-Elemente) sind somit nur "scheinbar" damit handelbar!

Autor: (prefix)