201109Sep

HTML/CSS: Horizontale und vertikale Zentrierung

Die Entwicklung eines soliden HTML/CSS-Grundgerüsts stellt immer noch die Basis für ein individuelles Web-Projekt dar. Trotz der Möglichkeiten von CSS3 und HTML5 sind bestimmte Aspekte gleich geblieben. Layouts unterliegen den Fähigkeiten und Einschränkungen von Cascading Style Sheets und durch Grid-Frameworks oder Boilerplates lässt sich hier lediglich Zeit einsparen. Spezielle Probleme oder Anforderungen an ein Layout müssen stets per Hand gelöst werden. Natürlich existieren durch Pre-Processing mittels PHP oder Post-Processung mit JavaScript Möglichkeiten, um besonderen Gegebenheiten entgegenzukommen. Als erster Weg sollte dennoch die klassische HTML/CSS-Lösung angedacht werden, sofern es realisierbar ist.
Ein allgemeine und etwas ältere Anforderung an ein HTML-Layout kann so die horizontale und vertikale Zentrierung sein, die möglichst browserübergreifend funktionieren soll. Es gibt verschiedene Methoden, diese Darstellung zu bewerkstelligen und ich will in dieser kurzen Anleitung die Technik beleuchten, die sich bisher bewährt hat. Zudem will ich den Nachteil einer anderen Technik aufzeigen, die ebenfalls bekannt ist und häufig Verwendung findet.

HTML/CSS - Horizontale und vertikale Zentrierung

Ziel ist es also, einen Container mit einer festen Größe sowohl horizontal als auch vertikal zu zentrieren. Ähnlich wie beim Sticky Footer ist dies nur mit einem zusätzlichen Container möglich. Es gilt also abzuwägen, ob eine CSS-Lösung eingesetzt werden soll oder ob der Container einfach per JavaScript zentriert werden kann.

Während eine JavaScript-Lösung auf dem "resize"-Event des Browserfensters basiert und somit optische Verzögerungen entstehen können, gibt es bei der CSS-Lösung neben dem zusätzlichen Container keine Nachteile. Ich will zuerst die Methode aufzeigen, mit der sich eine Zentrierung ohne zusätzliche Elemente realisieren lässt, allerdings keine optimale Darstellung gewährleistet werden kann. Das HTML-Grundgerüst für dieses Beispiel:

  • <html>
  • <head></head>
  •  
  • <body>
  • <div id="container">
  • <div id="content">
  • Inhalt
  • </div>
  • </div>
  • </body>
  • </html>

Der dazugehörige CSS-Code:

  • html, body {
  • width:100%;
  • height:100%;
  • padding:0;
  • margin:0;
  • }
  •  
  • div#container {
  • position:absolute;
  • left:50%;
  • top:50%;
  • width:600px;
  • height:300px;
  • margin-left:-300px; /* Hälfte der Breite nach links */
  • margin-top:-150px; /* Hälfte der Höhe nach oben */
  • }
  •  
  • div#content {
  • padding:20px;
  • }

Hier wird also die Position des Containers absolut eingestellt und die Zentrierung wird über eine Kombination aus den Koordinaten für die Position und negativen Werten bei "margin" erreicht. Das funktioniert soweit, allerdings hat diese Technik einen Nachteil, wenn das Browserfenster verkleinert wird. Die Abbildung zeigt den Effekt:

HTML/CSS - Horizontale und vertikale Zentrierung mit negativem Effekt

Der Benutzer hat dadurch keine Chance mehr, bei kleineren Auflösungen oder Bildschirmen die Inhalte der Seite zu sehen, da die Scrollleisten dies nicht zulassen. Die elegantere Lösung funktioniert daher mit einem zusätzlichen Container und behebt diese Unschönheit. Der Hilfscontainer muss vor dem zu zentrierenden Element eingefügt werden:

  • <html>
  • <head></head>
  •  
  • <body>
  • <div id="centerhelper"></div>
  • <div id="container">
  • <div id="content">
  • Inhalt
  • </div>
  • </div>
  • </body>
  • </html>

Der abgeänderte CSS-Code:

  • div#centerhelper {
  • width:1px;
  • height:50%;
  • margin-bottom:-150px; /* Hälfte der Container-Höhe */
  • float:left;
  • }
  •  
  • div#container {
  • width:600px;
  • height:300px;
  • margin:0 auto;
  • clear:left;
  • }

Bei dieser Methode wird also auf die absolute Positionierung verzichtet und stattdessen kommen "float:left;" und "clear:left;" zum Einsatz. Erst diese beiden Eigenschaften beheben die fehlerhafte Darstellung. Ohne diese Attribute würde sich das gleiche Phänomen ergeben wie im ersten Lösungsansatz. Lediglich der Container "centerhelper" benötigt bei der Angabe für Höhe die Hälfte der Container-Höhe. An dieser Stelle kann natürlich auch die Größeneinheit "em" verwendet werden.
Der gesamte Code zur zweiten Methode kann in meinem fertigen Beispiel angesehen und verwendet werden.

RSS-Feed abonnieren Bookmark bei Del.icio.us Bookmark bei Mister Wong