Html-Elemente mit CSS mittig ausrichten

Blockelemente und Inline-Elemente werden mit unterschiedlichen Anweisungen ausgerichtet

Blockelemente wie Absätze oder Inline-Elemente wie Texte können innerhalb der Webseite beliebig horizontal und vertical ausgerichtet werden. Dabei sind jedoch für Blockelemente und Inline-Elemente unterschiedliche CSS-Style-Anweisungen zu verwenden. Es ist also sehr wichtig zwischen beiden Elemente sauber zu unterscheiden um das gewünschte Ergebnis zu erreichen.

Wurden früher Tabellen zur Positionierung von Elementen auf Webseiten benutzt, sollte das Ausrichten der Html-Elemente mit Hilfe von CSS heute zum Standard gehören. Aus Sicht der Nutzerfreundlichkeit ist dies sehr zu begrüßen. Die so erstellten barrierefreien Webseiten sorgen dafür, dass Menschen mit Handicap Ihre Seiten ebenfalls problemlos betrachten können.

Zunächst müssen Sie zwischen der Ausrichtung von Blockelementen und Inline-Elementen unterscheiden. Lassen Sie sich dabei nicht durch eine korrekte Darstellung, in manchen Browsern, über Fehler hinweg täuschen. Wenn Sie ihre Quelltexte etwa im Internetexplorer 6.x testen, kann dies sehr leicht passieren. In diesem Browser werden beispielsweise auch Blockelemente mit der Style-Anweisung text-align:center; horizontal mittig ausgerichtet. Dies ist eigentlich eine fehlerhafte Interpretation der css-Anweisung im IE und nicht im Sinne des W3C. Andere Browser, wie der Firefox oder Opera, setzen den Quelltext in diesem Falle richtig um und richten Blockelemente auf diese Art nicht mittig aus. Auch der Internetexplorer ab Version 7.x tut dies nicht mehr. Bei der Fülle an Webbrowsern kann es jedoch weitere Browser geben, die wie der IE 6.x reagieren.

Es gibt also einen Grund sich näher mit diesem Fall zu beschäftigen, um eine zufriedenstellende Darstellung des gewünschten Layouts, in möglichst vielen Browsern zu erreichen und möglichst W3C-konform, in korrektem Html zu arbeiten. Mit einer immer besser werdenden Umsetzung der css-Anweisungen in den modernen Browsern zahlt sich die Erstellung korrekter Quelltexte wirklich aus.

Horizontale Ausrichtung mit text-align: und margin:

Texte innerhalb von Blöcken und inline-Elemente lassen sich mit text-align ausrichten.

text-align:left; linksbündige Ausrichtung
text-align:right; rechtsbündige Ausrichtung
text-align:center; mittige Ausrichtung
text-align:justify; Blocksatz

Linksbündige Ausrichtung ist per default eingestellt und braucht deshalb nicht explizit angegeben werden. Wollen Sie innerhalb einer bereits bestehenden, beispielsweise mittigen Ausrichtung, ein Element linksbündig anordnen ist die Angabe text-align:left allerdings sehr hilfreich.

Ganze Blöcke werden mit margin: über den linken und rechten Außenabstand ausgerichtet. Die Breite des Blockes muss angegeben werden.

width:20em; margin-left:auto; margin-right:auto;

richtet den 20em (320px) breiten Block horizontal mittig aus.

Leider verhalten sich hier wieder einmal nicht alle Browser gleich. Der Internetexplorer < Version 6.x versteht diese Angaben ebensowenig wie der Netscape < 6.x. Für den IE können Sie dessen fehlerhafte Darstellung nutzen und einfach text-align:center; verwenden. Browser, die korrekt arbeiten ignorieren diese Angabe für die Darstellung von Blöcken und der IE < 6.x stellt so formatierte Blöcke horizontal mittig dar.

Beispiel: Rechteck horizontal und vertikal mittig ausrichten:

Möchten Sie Blöcke horizontal und vertikal mittig ausrichten ist etwas Mathematik gefragt und die Größe des Blockes in horizontaler und vertikaler Richtung muß angegeben werden.

.rechteck {width:60em; height:40em; 
	  position:absolute; left:50%; top:50%; 
	  margin-left:-30em; margin-top:-20em; 
	  border: 1px solid #F3F1B4;
	  z-index:1;}

Mit der Klasse .rechteck wird in unserem Beispiel ein Rechteck von 60em (960px) Breite und 40em (640px) Höhe horizontal und vertical mittig im Browserfenster ausgerichtet. Das Rechteck wird absolut positioniert, d.h. es richtet sich nicht nach anderen Elementen auf der Webseite, kann also nicht durch sie verschoben werden. Bei absoluter Positionierung sollte deshalb ein z-index festgelegt werden, damit bei überlappenden Ebenen nicht versehentlich Elemente verdeckt werden. Die Ebene mit dem niedrigsten z-index befindet sich unten, d.h. die Ebene mit z-index:2 befindet sich vor der Ebene mit z-index:1; und verdeckt diese bei Überlappung.

Mit left:50%; und top:50%; legen Sie den Mittelpunkt im Browserfenster fest. Dies ist auch der Mittelpukt für die Webseite. Deshalb muss im nächsten Schritt Höhe und Breite des Rechteckes halbiert werden und mit negativer margin für top und left angegeben werden. Dies legt die obere linke Ecke im Browserfenster fest. Von diesem Punkt ausgehend wird dann das Rechteck im Browser dargestellt.

Website horizontal und vertikal mittig im Browserfenster ausrichten

Horizontal und vertikal mittig ausgerichtete Webseiten beinhalten einige Nachteile und sind deshalb nicht zu empfehlen. Vor allem auf mobilen Endgeräten mit ihren unzähligen Displaygrößen dürfte diese Ausrichtung zu unlösbaren Problemen führen. Trotzdem haben wir hier ein Beispiel für einemittig im Browserfenster ausgerichte Website nieder geschrieben, welche auch noch auf einem 800x600 Pixel großen Monitor gut dargestellt wird. Die in diesem Beispiel enthaltene Beschreibung sollte Ihnen für eigene Webdesign-Entwürfe und zur Veranschaulichung, der mittigen Ausrichtung dienen.

Da bei einem Monitor mit 800x600 Pixeln Darstellungsgröße für den Inhalt nur höchstens 740x420 Pixel zur Verfügung stehenden, der Platz also sehr begrenzt ist, sollten Sie dieses Beispiel nur anwenden, wenn Sie sicher sind, dass Ihr Inhalt die zur Verfügung stehende Fläche nicht überschreitet. Denkbar wäre dieses Beispiel zum Einsatz einer Diashow.

Probleme bei mittiger Ausrichtung der Website

Vertikal mittiges Ausrichten der Website

Horizontal mittiges Ausrichten der Website im Browserfenster kann durchaus sinnvoll sein, auf ein vertikal mittiges Ausrichten sollten Sie, zumindest mit css, besser verzichten. Wollen Sie nicht darauf verzichten, kommen Sie um den Einsatz einer Tabelle oder eines Framesets als Grundgerüst für Ihr Layout nicht herum. Von einem Frameset raten wir allerdings ab.