Vertical Align
Von Roman Röhrig | CSS-Praxis
Ich persönlich finde diese Startseiten mit Links wie “Hier klicken, um Website XY zu betreten” ja höchst überflüssig. Warum soll der Besucher noch ein weiteres mal klicken müssen, um die Seite zu “betreten”? Anscheinend hatte er doch sowieso die Absicht, sich die Website anzusehen, sonst hätte er sie ja nicht aufgerufen. Wenn man jemanden anruft, ertönt ja auch keine Ansage, die sagt: “Hier ist das Telefon von XY. Wenn Sie jetzt wirklich mit XY telefonieren möchten, sagen Sie bitte ‘Weiter’.”
Trotzdem kann es vorkommen, dass man so eine Startseite bauen muss, z.B. wenn man nur ein Design umsetzt, das jemand anders vorgibt. Und dann ist es meistens auch noch so, dass das, was auf der Startseite stehen soll, mittig auf der Seite positioniert sein soll. Ist man in einer solchen Lage, hat man es meist mit einem der gefürchtetsten Probleme beim Gestalten mit validem XHTML und CSS zu tun: Vertikale Zentrierung.
Viel Frust bleibt einem erspart, wenn man weiß, dass die CSS-Eigenschaft “vertical-align” nur auf Inline-Elemente anzuwenden ist. Es ist kein Browser-Fehlverhalten, dass die vertikale Zentrierung eines DIV-Elements damit nicht funktioniert. Aber auch die Annahme, man könne mit “vertical-align” folglich ein Inline-Element innerhalb eines Block-Elements ausrichten, ist falsch: Die Ausrichtung erfolgt relativ zur Zeilenhöhe, nicht in Bezug auf die Höhe des umgebenden Block-Elements.
“height” vs. “line-height”: Die Ausrichtung mit “vertical-align” erfolgt relativ zur Zeilenhöhe.
Wie in der Abbildung zu sehen ist, funktioniert “vertical-align”, richtig angewandt, tatsächlich wie gewünscht. Im Beispiel ist das auch ganz einfach, weil die tatsächliche Höhe, in deren Mitte der Text positioniert werden soll, bekannt ist. Das Problem bei der Startseite ist jedoch, dass man eben keine Kenntnis von der Höhe des Browserfensters hat. Es funktioniert auch nicht mit der Angabe line-height: 100%;, weil die in Prozent angebene Zeilenhöhe relativ zur Schriftgröße ermittelt wird.
Im folgenden möchte ich einen Workaround vorstellen, der geeignet ist, ein Element, dessen Höhe bekannt ist, mit wenig Aufwand - also ohne JavaScripts, ohne CSS-Hacks, ohne browserspezifische CSS-Regeln - vertikal auf der Seite zu positionieren. Die Methode ist so nicht dazu gedacht und geeignet, komplette, komlexe Layouts vertikal auszurichten. Prinzipiell sollte die Lösung jedoch für alle Elemente funktionieren, von denen die absolute Höhe bekannt ist.
Der Workaround basiert darauf, zunächst ein als Behälter dienendes Block-Element (im Beispiel das H1-Element) mit seiner Oberkante vertikal mittig auszurichten. Das funktioniert mit Hilfe absoluter Positionierung (position: absolute;) und der Angabe der gewünschten Differenz vom oberen Rand des Browserfensters (top: 50%;), obwohl man die tatsächliche Höhe des Browserfensters nicht kennt. Das darin enthaltene A-Element wird nun per CSS-Eigenschaft “margin-top” um die Hälfte seiner eigenen Höhe nach oben verschoben, et voilà: der Link ist vertikal zentriert. Weitere CSS-Regeln im Beispiel-Code dienen dazu, die horizontale Ausrichtung festzulegen sowie, zur Veranschaulichung, den Elementen kräftige Hintergrundfarben zuzuweisen.
Vertikale Zentrierung mit einfachen Mitteln
Der XHTML- sowie der CSS-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
* {
margin: 0; padding: 0;
}
body {
background: gray;
height: 100%;
}
h1 {
background: yellow;
position: absolute;
top: 50%;
width: 100%;
}
a {
background: orange;
display: block;
font-size: 50px;
line-height: 100px;
margin-top: -50px;
margin-left: auto;
margin-right: auto;
position: relative;
text-align: center;
width: 200px;
}
/*]]>*/
</style>
</head>
<body>
<h1>
<a href="#">Link</a>
</h1>
</body>
</html>