Dr. O. Hoffmann
Das Schöne tut seine Wirkung schon bei der bloßen Betrachtung, das Wahre will Studium.
Johann Christoph Friedrich von Schiller
Inzeilige Elemente wie Text, Bilder, das Element span
, Verweise können mittels
text-align
: center relativ zum umgebenden Blockelement
horizontal zentriert werden. Blockelemente wie Überschriften werden damit nicht
direkt zentriert, sondern nur ihr Inhalt, sofern es sich um inzeilige Elemente handelt.
Das horizontale Zentrieren von Blockelementen wie Überschriften, Listen oder
div
-Elementen ist recht einfach - dazu ist nur
margin-left
: auto und
margin-right
: auto anzugeben.
Relevant ist das natürlich nur, wenn das Objekt eine definierte Breite hat,
dazu dienen die Eigenschaften width
oder
max-width
- in der Regel mit Maßangaben
in em oder Prozent.
Beispiel:
Horizontales Zentrieren
Der Text wird bereits im Element body
zentriert, ein Element div
mit der Breite 20em wird horizontal zentriert. Die Rahmen der Elemente body
und div
sind jeweils mit einem Titelattribut und einem dünnen Rahmen
ausgestattet, damit festgestellt werden kann, wo sich was befindet.
Erfolgreich getestet mit: Konqueror 2.2 und 3.2, Opera 7.54, 8, 9, Mozilla/Gecko 1.5, Netscape 4.75,
microsoft-internet-explorer 6 (msie), Amaya 8.2.
Probleme: Netscape4 zentriert das Blockelement, aber übernimmt nicht das
text-align
vom body
(hier bereits durch erneute Angabe kompensiert,
wäre für die anderen überflüssig).
Eine andere Möglichkeit ergibt sich natürlich, wenn für
margin-left
und margin-right
der gleiche Wert angegeben wird.
Vertikales Zentrieren ist hingegen nur für Tabellen vorgesehen oder für
Elemente mit einer Tabellenformatierung display: table, table-row, table-cell
.
Liegt ein Element mit einer definierten Höhe vor, kann innerhalb dieses Elementes ein
weiteres relativ leicht vertikal zentriert werden. Dazu wird das zu zentrierende Element mit
dem CSS-Attribut display: table-cell
und mit vertical-align: middle
ausgezeichnet.
Das umgebende Element bekommt die Eigenschaft
display
: table.
Beispiel:
Test: Zentrieren mit tabellenartigen Attributen 1
Der Inhaltskasten (violetter Rahmen) sollte relativ zur div
-Bereich table
(brauner Rahmen) zentriert sein. Um zu verstehen, welches Darstellungsprogramm welches
Anzeigemodell hat, ist die Farbe des Hintergrundes für das Element html
gelblich, die für das Element body
violett und für div
der Klasse table nahezu weiß.
Die Elemente in diesem Bereich sind mit Rahmen gekennzeichnet.
Erfolgreich getestet mit: Konqueror 2.2, 3.2 und 3.3, Opera 7, 8, 9, Mozilla/Gecko 1.5, 1.8
Diverse Probleme mit Netscape 4.75, Amaya 8.2, microsoft-internet-explorer 6,
aber der Inhalt bleibt zugänglich. Amaya und der internet-explorer ignorieren
vor allem Angaben zur Höhe, bereiten sonst aber keine Probleme.
Das Element div
der Klasse table versuche ich ferner
relativ zum Anzeigebreich des Darstellungsprogrammes mit
margin-top
zu zentrieren,
dabei sind html
und body
zu 100% definiert.
Das klappt so bei keinem Programm perfekt - warum, weiß ich nicht.
In den nächsten Beispielen dazu mehr.
Die Ursache aller Probleme des vertikalen Zentrierens relativ zum Anzeigebereich des Darstellungsprogrammes liegt bereits in der Spezifikation begraben. Oder wenn man so will, im Anspruch des vertikalen Zentrierers im Medium XHTML, das ja an sich ein Fließtext-Medium ist, dessen Höhe von dargestellten Elementen also durch deren Inhalt bestimmt wird. Eine Höhe ergibt nur in Ausnahmefällen in so einem Medium einen Sinn. Wenn ein Autor wirklich volle Kontrolle über die Positionierung von Inhalten benötigt, ist eher ein Format wie SVG angemessen, nicht XHTML, weil es ein dafür geeignetes Modell aufweist. (X)HTML hat gegenüber anderen Formaten ohnehin historische Probleme, die teilweise auch mit Sonderregeln in CSS zum Ausdruck kommen.
Bei graphischen Darstellungsprogrammen ist die Korrelation zwischen dem Anzeigebereich und den
Abmessungen der Elemente html
oder body
nicht eindeutig
festgelegt. Zudem kann dies für HTML und XHTML (XML)
unterschiedlich sein. Während allgemeine Übereinstimmung darin besteht,
daß hundert Prozent Breite von html
dem Anzeigebereich entspricht,
sind die Modelle für die Höhe uneinheitlich oder im Falle des Programmes
microsoft internet explorer (msie) vermutlich gar nicht definiert.
Für Opera sieht es so aus, als entspreche hundert Prozent Höhe von html
dem
Anzeigebereich. Beim Mozilla/Gecko ist dies ebenso und auch beim Konqueror. Der msie kann
offenbar den Bereich für html
selbst gar nicht darstellen.
Jetzt sollte eigentlich für die drei ersten Programme klar sein, was jeweils hundert Prozent für
body
bedeutet - das sollte identisch mit dem Bereich für html
sein.
Konqueror (getestet mit Version 3.2) ist aber anderer Meinung und beendet body
vertikal direkt nach dem Inhalt derselben und dehnt sie nicht bis zur Ende von html
aus.
Das macht vertikales Zentrieren relativ zum Element html
des Konquerors 3.2
unmöglich, nicht jedoch zu seinem Anzeigebereich.
Der msie verhält sich noch widersprüchlicher - er dehnt zwar body
über den ganzen Anzeigebereich aus, verweigert aber trotzdem ähnlich dem
Konqueror den Zugriff auf den Teil von body
unterhalb des Inhaltes.
Das macht vertikales Zentrieren relativ zum Anzeigebereich beim msie eigentlich
ganz unmöglich, bei Prozentangaben hat er aber eine Überraschung parat, was
wiederum das Verhalten dieses Programmes komplett unvorhersehbar erscheinen läßt.
Bei den folgenden Beispielen sind die einzelnen Elemente sowohl mit einem geeigneten Attribut
title
ausgestattet als auch mit einem farbigen Rahmen. Bedingt
durch die endliche Breite der Rahmen kann es zu kleinen Ungenauigkeiten von der
Größenordnung der Rahmendicke kommen, die ohne Rahmen nicht auftreten sollten.
Farben (Rahmen/Hintergrund): cyan/rosa - html
; blau/gelbweiß -
body
; grün - div
der Klasse viewport
(nur erstes Beispiel), diese hat eine feste Größe von 30em und ist
vertikal nicht zentriert, alles andere sollte zentriert sein. Innerhalb dieses Elementes
div
befinden sich die Elemente div
mit Tabellenanzeige
und darin mit violettem Rand zentriert das Element div
mit dem Inhalt.
Je nach Position der Maus innerhalb der tabellenartigen Elementes div
wird
der Text zentriert, links- oder rechtsbündig angezeigt.
Beispiel:
Test: Zentrieren mit tabellenartigen Attributen 2
Erfolgreich getestet mit: Konqueror 2.2, 3.2 und 3.3, Opera 7, 8, 9, Mozilla/Gecko 1.5, 1.8.
Diverse Probleme mit Netscape 4.75, Amaya 8.2, microsoft-internet-explorer 6,
aber der Inhalt bleibt zugänglich.
Zentrieren des Bereiches 'table' relativ zu 'viewport'
erfolgreich getestet mit: Konqueror 2.2, 3.2 und 3.3, Opera 7, 8, 9, Mozilla/Gecko 1.5, 1.8
Weitere Zentrierungsversuche dieses Bereiches 'viewport' zum body
oder dem
Anzeigebereich des Darstellungsprogrammes klappten aber wieder nicht perfekt,
dafür ist offenbar anders vorzugehen.
Beim nächsten Beispiel findet die Zentrierung über die Festlegung der Außenrandabstände
statt und verwendet Absolutpositionierung, bei der sich Opera, Mozilla und Konqueror allerdings einig sind,
daß die Positionierung relativ zum Anzeigebereich zu erfolgen hat. Folglich treten
keine Probleme mit der Zentrierung auf. Anders beim msie, dessen Fehler hier abgefangen werden
müssen, damit der Inhalt überhaupt noch angezeigt wird.
Man beachte wieder die unterschiedliche Interpretation des Bereichs html
und von
body
bei den verschiedenen Programmen - die in diesem Falle allerdings mit Ausnahme
des msie keine Rolle spielt.
Beispiel:
Test Zentrieren durch Festlegung des Außenabstandes
Erfolgreich getestet mit: Konqueror 3.2, 3.3, Opera 7, 8, 9, Mozilla/Gecko 1.5, 1.8
Probleme mit Konqueror 2.2, Netscape 4.75, Amaya 8.2, msie6, Inhalt bleibt aber zugänglich.
Weitere Beispiele, mit Konqueror 3.2, Mozilla und Opera erfolgreich getestet, für die anderen
zugänglich (gemacht):
Test: Zentrieren mit Absolutpositionierung in %
Test: Zentrieren mit Absolutpositionierung in em
Test: Zentrieren mit fixed
-Positionierung in %
Test: Zentrieren mit fixed
-Positionierung in em
Eine weitere Möglichkeit ergibt sich, wenn die Abmessungen in Höhe und Breite (zum
Beispiel jeweils 22em) für
ein Objekt festgelegt sind. Dann kann man es einfach mit
position
: absolute;
top
: 50%;
left
: 50%;
height
: 22em;
width
: 22em;
margin-top
: -11em;
margin-left
: -11em;
overflow
: auto;
zentrieren.
Das mit 'box' bezeichnete Element div
wird in dem Beispiel zentriert.
Um abgeschnittenen oder überstehenden
Inhalt zu vermeiden, wurde noch overflow
: auto gesetzt.
Die Methode eignet sich allerdings nur für Objekte, die garantiert kleiner als der
Anzeigebereich sind, sonst wird es spannend, wie das Programm den Konflikt löst.
Da nur CSS-Anweisungen verwendet werden, die schon lange von Darstellungsprogrammen
beherrscht werden,
gibt es hier die wenigsten Kompatibilitätsprobleme, sollte man meinen, aber bei Amaya 8.2 und dem
alten Konqueror 2.2 wird der Inhalt so unzugänglich. Das dürfte vermutlich am negativen
margin
liegen, der von diesen falsch interpretiert wird, obgleich dies erlaubt ist.
Beispiel:
Test: Zentrieren mit absoluter Positionierung und
negativem Außenabstand
Erfolgreich getestet mit: Konqueror 3.2, Opera 7.54, Mozilla/Gecko 1.5, msie 6.
Probleme mit Konqueror 2.2 und Amaya 8.2 (ohne folgende Korrektur unlesbar!), Netscape 4.75
(alles bleibt lesbar)
Indem die negativen Angaben zu margin
in einen speziellen Selektor
div
.box[class
] gesetzt werden,
den die beiden nicht kennen, wird der Inhalt wieder lesbar gemacht. Da der msie diesen aber auch nicht
kennt, muß das für den wieder rückgängig gemacht werden,
daher wird für den ein gesonderter CSS-Bereich mit diesen Angaben wieder angehängt.
Schön ist das besonders bei den alten Programmen alles noch nicht, aber mit Mühe handhabbar.
Mit ähnlichen Tricks sind natürlich auch andere Positionierungen möglich,
etwa nach dem goldenen Schnitt oder sonstigen ästhetischen Gesichtspunkten.
Test fixed-Positionierung mit Werten aus dem
Goldenen Schnitt,
mit Konqueror 3.2, Mozilla und Opera erfolgreich getestet,
für die anderen zugänglich (gemacht).