Tutorial: HTML Elemente zentrieren
Um HTML Elemente zu zentrieren
gibt es leider keine allgemeingültige Lösung, die für alle Browser ein gleiches
Erscheinungsbild garantiert. Somit ergibt sich die Notwendigkeit die Vor- und Nachteile
verschiedener Methoden zu vergleichen, um die für den gewünschten Zweck am besten
geeignete Variante auswählen zu können. Einige Methoden werden im Folgenden angesprochen
und ihre Stärken und Schwächen gegenübergestellt.
Wichtig zu beachten ist, dass bei prozentualen Angaben die Ausmaße des Elternelementes
zur Berechnung herangezogen werden. Aus diesem Grunde ist es wichtig, ihnen
entsprechende Angaben zuzuweisen. Für die anschließenden Beispiele werden alle
browserabhängigen margin- und padding- Werte auf 0 gesetzt, sowie eventuelle Rahmen
unterdrückt:
* {margin:0; padding:0; border:none;}
Zudem werden ausdrücklich für html und body 100% Breite und 100% Höhe vorgegeben:
html, body {height:100%; width:100%;}
Relevante CSS Angaben sind auf den
Beispielseiten direkt im Quelltext notiert und nicht in separate Dateien ausgelagert.
So ist der CSS-Code einfach im Quelltext der jeweiligen Seite nachzulesen.
Horizontale Zentrierung
Hier muss man primär einmal zwischen
Inlineelementen (extern) und
Blockelementen (extern)
unterscheiden. Das kleinste Problem stellt dabei die einfache Zentrierung von
Inlineelementen dar. Mit text-align:center; lässt sich diese Anordnung
per CSS einfach durchführen.
Fast ebenso einfach gestaltet sich dagegen das Zentrieren von Blockelementen.
Folgendes Beispiel soll dies verdeutlichen:
Ein Blockelement, in diesem Fall eine Liste soll halb so breit
sein wie das Browserfenster und horizontal zentriert werden.
Für standardkonforme Browser bietet sich dazu eine Lösung mittels margin
an, nämlich:
margin-left:auto; margin-right:auto;.
Das allerdings funktioniert im IE nur
bedingt. Versionen kleiner IE6 verstehen margin:auto; nicht, der IE6
nur im standardkompatiblen Modus, aber nicht im Kompatibilitätsmodus (Quirks).
Trotzdem kann man auch im IE Blockelemente horizontal zentrieren. Denn glücklicherweise
macht der IE in diesen Fällen einen anderen Fehler: Er wendet die Eigenschaft
text-align:center; auch auf Blockelemente an.
Also geben wir dem Elternelement der Liste eben diese Anweisung und zentrieren
dadurch die Liste auch für den IE. Da nun aber auch der Listentext zentriert
ist, da diese Eigenschaft vererbt wird, muss der Text in der Liste ausdrücklich wieder
linksbündig ausgerichtet werden.
Standardkonforme Browser werden durch diesen Umweg nicht aus dem Konzept gebracht,
so dass mit einer Kombination beider Methoden problemlos ein allgemeingültiges
Ergebnis erreicht wird.
Anzeigebeispiel
Vertikale Zentrierung
Eine Zentrierung von HTML Elementen in der Vertikalen ist deutlich schwieriger, als in der Horizontalen. Da es eine universelle, ideale Lösung nicht gibt, ist es wichtig die Möglichkeiten miteinander zu vergleichen, um die geeignete für den jeweiligen Zweck auzuwählen.
Inhalt in einer Zeile vertikal zentrieren
Um bei dem vorherigen Beispiel der Liste zu bleiben, sollen nun die Listenpunkte 3em
hoch werden. Dabei stellt sich das Problem, dass der Text nun unschön am oberen Rand
der Listenpunkte klebt. Um diesen Text einfach vertikal zu zentrieren, bietet sich
die Eigenschaft line-height an. Setzt man diese ebenso auf 3em, dann ist
der Text in den Listenpunkten vertikal zentriert, wie man es vielleicht für eine
Navigationsliste erreichen möchte.
Doch gibt es hier das Problem, dass bei einem Zeilenumbruch der Zeilenabstand
entsprechend groß dargestellt wird. Wird dieser Umstand aber ausreichend bedacht,
ist diese Methode für „Einzeiler” universell einsetzbar.
Anzeigebeispiel
Block Element bekannter Größe zentrieren
Sofern die Größe des zu zentrierenden Elementes bekannt ist, kann eine absolute
Positionierung mit negativem Margin eingesetzt werden. Dazu wird das Element
absolut positioniert, und die linke obere Ecke des Elements mittels
top: 50%; left:50%;
in der Mitte des Browserfensters positioniert. Mit dem negativen margin-top:
HöheElement/2 und margin-left: BreiteElement/2 findet dann die Zentrierung
in beiden Dimensionen statt. In dem Beispiel also margin-top:-10.5em; und margin-left:-250px;
Anzeigebeispiel
Problematisch wird diese Methode allerdings, wenn das Browserfenser kleiner wird,
als das zentrierte Element. Auf Grund der absoluten Positionierung wird ein Teil des
Elements aus dem Browserfenster geschoben, ohne durch die Bildlaufleisten erreichbar zu sein.
Der Inhalt wird somit zumindest teilweise unzugänglich. Davon abgesehen ist diese Methode
aber universell einsetzbar, sofern die Ausmaße des zu zentrierenden Elementes vorgegeben sind.
Eine weitere Methode besteht darin, ein zusätzliches Element einzufügen, das den oberen Abstand
des zu zentrierenden Elementes bestimmt. Diese Methode basiert auf float und clear.
Das Prinzip ist ähnlich wie bei der vorherigen Methode. Dem Abstandhalter wird 50% Höhe
zugewiesen und er wird links gefloatet. Durch margin-bottom:- HöheElement/2
wird das HTML Element in der vertikalen Mitte zentriert.
Anzeigebeispiel
Der Vorteil dieser Methode liegt auf der Hand: Da das zentrierte Element nicht absolut mit
negativen margins positioniert werden muss, bleiben die Inhalte auch bei verkleinertem
Browserfenster über die Bildlaufleisten erreichbar.
Als Nachteil muss man in Betracht ziehen, dass ein zusätzliches Element eingefügt wird, das selbst
keinen Inhalt trägt, sondern nur gestalterischen Zwecken dient.
Diese Methode ist im Original in englischer Sprache unter
http://d-graff.de/fricca/center.html (extern) erschienen.
Block Element unbekannter Größe zentrieren
Diese Aufgabe ist zu erfüllen, wenn man eine Tabelle zu Hilfe nimmt. Mit der
Eigenschaft vertical-align:middle; können Elemente in Tabellenzellen vertikal
zentriert werden. Dazu muss also in einer Tabelle eine Tabellenzelle enthalten
sein, der diese Eigenschaft zugewiesen wird.
Horizontal wird das Element dann wie oben erläutert mit margin:auto; zentriert.
Da keine Tabelle existiert, wird für das html Element die Eigenschaft display
als Tabelle definiert und für das Element body als Tabellenzelle. In CSS sieht das dann
so aus:
- html {display:table;}
- body {display:table-cell; vertical-align:middle;
Anzeigebeispiel
Diese Methode ist nahezu perfekt. Es wird kein zusätzliches Element im HTML eingefügt und
der Quellcode bleibt schlank und auf reine Auszeichnung beschränkt, wie HTML sein sollte.
Die besondere Einschränkung liegt hier eigentlich nur in dem Umstand, dass der Internet
Explorer die für diese Methode notwendigen Anweisungen nicht umsetzen kann.
Hier stellt sich nun ein Konflikt ein. Entweder den Umstand hinnehmen, daß die Darstellung
im IE nicht der standardkonformer Browser
entspricht, was in den meisten Fällen hinnehmbar sein wird.
Oder, sofern die vertikale Zentrierung zwingend erforderlich erscheint, muss dem
IE notfalls nachgeholfen werden. Leider werden aber zusätzliche HTML Elemente erforderlich, die
nicht der reinen Auszeichnung der Inhalte dienen, sondern lediglich die Darstellung
ermöglichen sollen. Streng genommen widerspricht das der Intention von HTML als
reiner Auszeichnungssprache.
Die Qual der Wahl liegt in diesem Fall beim Webseitenersteller.
Zentrieren mittels HTML Tabelle
Um die HTML Elemente auch für den IE vertikal zentriert darstellen zu können, ist es nötig
eine Tabelle nicht nur per Definition zu "erstellen", sondern tatsächlich eine Tabelle
einzufügen. Die Diskussion, ob diese Methode der Absicht von HTML entspricht oder
nicht, überlasse ich an dieser Stelle anderen. Für den IE ist mir jedenfalls keine
bessere Möglichkeit bekannt. Abgesehen vielleicht von Lösungen über JavaScript, die
aber auch nicht bei jedem Nutzer funktionieren würden.
Der Trick für den IE besteht nun darin, eine Tabelle einzufügen, die eine einzige Zelle
enthält. Diese Tabellenzelle wird über die gesamte Breite und Höhe des Browserfenster ausgedehnt,
so dass die in dieser Zelle zentrierten Elemente auch im Browserfenster zentriert erscheinen.
Das funktioniert natürlich auch in standardkonformen Browsern.
Anzeigebeispiel
Der Code sähe dann so aus:
- table {height:100%; width:100%;}
- td {height:100%; width:100%; vertical-align:middle;
Der Vorteil dieser Methode liegt sicherlich darin, dass sie von allen gängigen
Browsern einschließlich des IE dargestellt werden kann. Allerdings werden hier
inhaltlich unnötige HTML Elemente eingefügt, die rein gestalterischen Aspekten dienen.
Nun ist die Anzahl dieser Elemente durchaus so sehr begrenzt, dass man in diesem Fall
auch begründet pragmatisch dafür argumentieren kann.
Obwohl Layouttabellen zu Recht verpönt sind, kann man in diesem speziellen
Fall in Anbetracht der doch sehr rudimentär angelegten Tabelle vielleicht eine Ausnahme
gelten lassen. Die Entscheidung liegt bei Ihnen.