Archive for CSS

Vertikal zentrieren mit CSS

November 22, 2007 at 9:02 · Filed under CSS, Web Development

Es gibt unterschiedliche Ansätze Inhalte auf einer Webseite mit CSS vertikal zu zentrieren, so dass z. B. eine Grafik in der Mitte der Seite dargestellt wird, einige davon funktionieren sogar recht ordentlich mit verschiedenen Browsern.

Um es vorweg zu nehmen: CSS2 besitzt keine Eigenschaft um Elemente vertikal zu zentrieren. Eventuell wird es das in CSS3 einmal geben., wie Bert Bos vom W3C treffend anmerkt. Der von ihm vorgeschlagene Weg bedient sich denn auch der CSS Eigenschaft display: table-cell in Kombination mit vertical-align: middle. Im Grunde ist dies ein Nachbau der hergebrachten HTML-Lösung den Inhalt im Layout mittels einer Tabelle zu zentrieren (<td valign="middle">). Da die vertical-align Eigenschaft in CSS sich nur auf Tabellenzellen oder inline Elemente Anwenden lässt (s. CSS 2.1 Specification), bewirkt sie bei Blockelementen wie <div> ohne Verwendung von display: table-cell nicht den gewünschten Effekt. Eine wenig elegante Lösung, denn eigentlich handelt es sich ja nicht um eine Tabelle.

Ein grundsätzliches Problem ist, dass die Höhe der auf dem Bildschirm sichtbaren Fläche mit der Auflösung und der Größe des Browserfensters variiert. Außerdem ist die Länge des Inhalts nicht notwendigerweise gleich der Höhe des Bildschirms, so dass möglicherweise vertikal gescrollt werden muss. Dem begegnet ein anderer verbreiteter Ansatz, bei dem ein Block Element (z. B. <div>), dessen Dimensionen bekannt bzw. festgelegt sind, anhand eines vorherigen Elements oder eines als Container fungierenden Elements positioniert wird. Dabei wird das Element anhand dessen ausgerichtet wird mittels Prozentangaben so positioniert, dass sein oberer Rand mit der Hälfte des angezeigten Bereichs abschließt. Das Element, dass die Inhalte enthält wird dann, um die Hälfte seiner Größe nach oben verschoben (was möglich ist, da seine Dimensionen bekannt sind). Außer der Tatsache, dass diese Methode mit weiterem Aufwand verbunden ist, wenn verschiedene Browser und Plattformen unterstützt werden müssen, ist sie auch nicht sehr elegant. Es wird ein Hilfselement eingeführt, dass nur für Layoutzwecke nötig ist. An eine Separierung von Content und Layout, was ja eines der Hauptanliegen beim Verzicht auf Layout mit HTML Elementen ist, ist nicht mehr zu denken.

Links

Schlagwörter: , ,

Comments (1)