Cascading Style Sheets ::Tutorials
Zentrierung eines Block- Level- Elements
In Webdesignforen taucht in schöner Regelmäßigkeit der Wunsch auf, den Seiteninhalt vertikal bzw. horizontal genau in der Mitte des Bildschirms zu plazieren. Mit ein wenig CSS ist das kein großes Problem.
Es gibt mehrere Möglichkeiten, ein Block- Level- Element mittig zu plazieren. Alle sind nicht neu und schon an einigen Stellen im Web in englischer Sprache publiziert worden. (siehe dazu die Hinweise am Ende der Seite). Dieser Artikel ist der Versuch, sie zum ersten Mal umfassend und in deutsch zu erklären.
Wenn wir nur ein einzelnes replaziertes Element mittig auf die Seite stellen wollen, mag es ausreichend sein, display:block dafür zu deklarieren. Sollen es mehrere bzw. nichtreplazierte Elemente sein, fassen wir sie in einem Block- Level- Element zusammen, am besten ein DIV, dessen Größe wir explizit festlegen. Die feste Größe ist wichtig, denn nur so können wir das Element in der Mitte plazieren. Ist sie nicht gegeben, dann werden Breite und Höhe des Elements automatisch von der Breite des umschließenden Elements bzw. vom Umfang des Inhalts bestimmt.
Wir sollten uns aber, bevor wir so etwas realisieren, über die kleinste Bildschirmgröße im klaren sein, mit der Besucher unsere Website ansurfen. Denn wenn der Schirm des Besuchers kleiner ist als der Splash-Screen, gibt es mit einigen Browsern Probleme.
Einschränkungen
Auf dieser Seite wird nur die absolute Positionierung von Block- Level- Elementen in Bezug auf das Browserfenster behandelt. Möglicherweise wird mancher auf die Idee kommen, die hier vorgestellten Techniken auf andere Weise anzuwenden, z. B. innerhalb eines Fließlayouts. Wer so etwas plant, muss bedenken, dass statisch positionierter Fließtext nicht ohne weiteres mit absolut positionierten Blöcken zusammen passt. Sobald man einen Block aus dem Fließlayout heraus nimmt und absolut positioniert, ist er nicht mehr Teil des Elementflusses. Der Fließtext schließt sich und es kommt zu Überdeckungen.
Die bessere Alternative ist in diesem Fall, mit Deklarationen wie margin:auto; oder text-align:center; zu arbeiten.
1. Horizontale Zentrierung mit margin:auto;
Hier nutzen wir die Eigenschaften margin-right und margin-left, um den DIV-Container horizontal in der Mitte zu plazieren. Wenn wir für beide den Wert auto deklarieren, sollen sie nach der Spezifikation vom Browser durch zwei gleich große Werte ersetzt werden.
Diese Methode funktioniert mit allen modernen Browsern, Ausnahme ist hier IE/Win 5 (wobei der auch eigentlich nicht mehr 'modern' genannt werden kann). Als Umgehung dieses Problems nutzen wir einen anderen Fehler des IE/Win 5 zu unserem Vorteil: er wendet die Eigenschaft text-align auch auf Block- Level- Elemente an.
Wenn wir also text-align:center; für das umschließende Element unseres DIV-Containers deklarieren, wird dieser dadurch in IE/Win 5 horizontal mittig plaziert. Wenn diese Ausrichtung für den Text in unserem DIV-Container unerwünscht ist, müssen wir sie anschließend dort wieder rück-deklarieren, denn der Wert dieser Eigenschaft wird weitervererbt.
Auf diese Art wird der Container zwar horizontal in die Mitte gestellt, aber eine vertikale Zentrierung lässt sich so nicht erreichen: um Abstand zum oberem Rand zu haben, muss margin-top mit einem willkürlichen Wert deklariert werden. Deshalb ist diese Methode eher geeignet, allgemeine Inhalte mittig auf die Seite zu stellen, mit gleich breiten Rändern rechts und links.
Beispiel 1 zeigt einen horizontal zentrierten DIV-Container, der ein Image enthält und 100 Pixel Abstand vom oberen Bildrand hat.
Das CSS des Beispiels (die wichtigen Deklarationen sind in rot hervorgehoben):
body { color: #fff; background: #222289 url(/graphics/textil14l.gif); padding: 0; margin: 0; text-align: center; } #main { background-color: transparent; text-align: left; padding: 7px; border: 1px dashed #b9821a; margin: 100px auto 0; width: 500px; height: 375px; }
2. Horizontale und vertikale Zentrierung durch negative margins
Die Zentrierung eines Block- Level- Elementes in beiden Richtungen bedeutet nichts anderes, als dass wir seinen Mittelpunkt mit dem Mittelpunkt des umschließenden Blocks zur Deckung bringen.
Leider gibt es keine Deklaration, durch die wir das unmittelbar erreichen können. Wir können aber dasselbe in mehreren Schritten erreichen. Zur Vereinfachung der Darstellung nehmen wir an, dass der umschließende Block mit dem Stammelement (sprich: Browserfenster) identisch ist.
Zuerst positionieren wir unseren DIV-Container absolut, so dass seine obere linke Ecke genau im Zentrum des Browserfensters liegt. Dazu brauchen wir folgendes CSS (nur die notwendigen Deklarationen sind in rot hervorgehoben):
#main { background-color: transparent; padding: 7px; border: 1px dashed #b9821a; margin: 0; position:absolute; top: 50%; left: 50%; width: 500px; height: 375px; }
Was unser CSS bis hierhin bewirkt, zeigt Beispiel 2a. Um das Prinzip deutlich zu machen und Scrollbalken auf kleineren Bildschirmen zu vermeiden, wurde an den Elementen HTML und BODY zusätzlich overflow:hidden; deklariert. Opera 7 hat damit seine Probleme, letztlich hat das aber nichts mit der Zentrierung eines Block- Level- Elements zu tun.
Jetzt machen wir uns die Tatsache zunutze, dass ein Element zu der Seite 'hingezogen' wird, an der wir es mit einer negativen margin versehen. Da unser DIV-Container mit seiner Ecke genau im Mittelpunkt des Browserfensters liegt, müssen wir ihn um die Hälfte seiner Breite nach links und um die Hälfte seiner Höhe nach oben 'ziehen'. Dazu addiert werden müssen noch die Werte für padding und border-width auf den jeweiligen Seiten.
Hier ist das CSS (Änderungen sind in rot hervorgehoben)...
#main { background-color: transparent; padding: 7px; border: 1px dashed #b9821a; margin: -196px 0 0 -258px; position:absolute; top: 50%; left: 50%; width: 500px; height: 375px; }
...und hier das Ergebnis als Beispiel 2b: der DIV-Container ist in die Mitte gerutscht.
Selbstverständlich ist man nicht darauf angewiesen, mit top und left zu arbeiten, denselben Effekt erzielt man auch mit right und bottom oder zwei anderen Seiten. Wichtig ist, dass sie nebeneinander, nicht gegenüber, liegen. Wir müssen allerdings immer die beiden margins der entsprechenden Seiten negativ deklarieren.
Da wir hier noch overflow:hidden; für das Element body deklariert haben, wird der zentrierte Block an den Rändern abgeschnitten, sollte er einmal größer als das Browserfenster sein. Dieses Verhalten ist völlig korrekt und wird auch von allen modernen Browsern so dargestellt, einzig der Internet Explorer (bis Version 7!) bringt am Browserfenster Scrollbalken an. Abhilfe schafft hier die Deklaration des Wertes hidden auch für das Element html.
3. Schachtelung in einen zentrierten Pixel
Die hier geschilderte Möglichkeit ist etwas aufwendiger, sie kann aber dennoch manchmal besser geeignet sein als die anderen beiden Möglichkeiten. Dazu positionieren wir ein Element DIV von nur einem Pixel Größe absolut in der Mitte des Bildschirms. Im Beispiel 3a ist dieser eine Pixel in der Bildschirmmitte weiß eingefärbt und gut erkennbar. Dort hinein schachteln wir den DIV-Container, der unsere Inhalte enthält. Wir positionieren ihn ebenfalls absolut und geben der Eigenschaft top die negative halbe Höhe als Wert und der Eigenschaft left die negative halbe Breite als Wert. Dazu addieren wir noch die Werte für padding, border-width und margin und jeweils einen Pixel für den 1 Pixel großen umschließenden Block. Dadurch steht unser DIV-Container, abgesehen von möglichen Rundungsfehlern, genau in der Mitte des Bildschirms. Jetzt brauchen wir nur noch dem 1-Pixel-Container die Deklaration overflow:visible; zu geben, damit die Inhalte auch wirklich in allen Browsern dargestellt werden. Das Ergebnis ist im Beispiel 3b zu sehen.
Das CSS dazu sieht so aus (die notwendigen Deklarationen sind in rot hervorgehoben):
#pixel { background-color: #fff; width: 1px; height: 1px; position: absolute; top: 50%; left: 50%; overflow: visible; } #main { background-color: transparent; padding: 7px; border: 1px dashed #b9821a; margin: 0; position: absolute; top: -195px; left: -259px; width: 500px; height: 375px; }
4. Horizontale und vertikale Zentrierung durch Hintergrundgrafik
Wenn wir nur ein Element IMG im Zentrum des Bildschirms plazieren wollen, kann dies ebensogut ein Hintergrundbild sein. Es handelt sich also hier nicht um die Zentrierung eines Block- Level- Elements. Mit den entsprechenden Werten für die Eigenschaft background stellen wir es genau in die Mitte und vermeiden die Kachelung des Hintergrundes (auch hier sind die direkt notwendigen Deklarationen wieder in rot hervorgehoben):
BODY { color: #fff; background: #312d4d url(/graphics/still-life_redorange.jpg) no-repeat 50% 50%; padding: 0; margin: 0; overflow: hidden; }
Beispiel 4a zeigt, wie es aussieht. Im Unterschied zu den Beispielen 1 bis 3 fehlen hier das blaue Hintergrundmuster des Elements BODY und der Rahmen um das zentrierte Bild. Der Grund dafür ist, dass für BODY jetzt das zentrierte Image als Hintergrund deklariert ist und das Element DIV, an dem der Rahmen angebracht war, hier nicht mehr vorhanden ist.
Zudem befindet sich das Hintergrundbild nicht genau in der Bildmitte. Das liegt daran, dass in diesem Fall die Höhe des Elements body nicht definiert ist.
Die exakt gleiche Darstellung wie in den voran gegangenen Beispielen erreichen wir, indem wir ein Block- Level- Element auf die bekannte Weise mittig plazieren und diesem DIV-Container dann ein Hintergrundbild geben. Falls wir auch padding oder margin deklarieren wollen, müssen wir den Hintergrund ebenfalls zentrieren. Dazu verwenden wir den Wert center anstelle von 50% 50%, denn damit wird die Darstellung auch in Opera 7 korrekt.
Hier ist das CSS dazu:
BODY { color: #fff; background: #312d4d url(/graphics/textil14l.gif); padding: 0; margin: 0; overflow: hidden; } #main { background: transparent url(/graphics/still-life_redorange.jpg) no-repeat center; padding: 7px; border: 1px dashed #b9821a; margin: -196px 0 0 -258px; position:absolute; top: 50%; left: 50%; width: 500px; height: 375px; }
Und so sieht es aus: Beispiel 4b.
Für Surfer mit standardstreuen Browsern ist noch ein zusätzlicher Gimmick eingebaut. Er wird sichtbar, wenn Sie den Cursor über das Bild bewegen.
Zum Abschluss noch ein paar Spielereien für alle, die mit einem standardskonformen Browser hier sind: Beispiel 5 zeigt, dass ein Splash-Screen nicht nur aus einem Element bestehen muss. Es lassen sich auch mehrere absolut positionierte Blocks kombinieren. Mit :hover und etwas Phantasie finden sich eine Menge Möglichkeiten.
Beispiel 6 zeigt etwas Ähnliches. Fahren Sie einfach einmal mit dem Cursor über den 'leeren' Bildschirm.
TOP
Hinweise:
Die Anregung zu diesem Artikel geht auf Veröffentlichungen von
Blue Robot (eins und zwei), Joe Gillespie, Tom Gilder, Roger Johansson (jetzt offline), Jon Hicks und Owen Briggs zurück, die mit eigenen Ideen und Ausarbeitungen angereichert wurden.
