Vertical Align

Ich persönlich finde diese Startseiten mit Links wie “Hier klicken, um Website XY zu betreten” ja höchst überflüssig. Warum soll der Besucher noch ein weiteres mal klicken müssen, um die Seite zu “betreten”? Anscheinend hatte er doch sowieso die Absicht, sich die Website anzusehen, sonst hätte er sie ja nicht aufgerufen. Wenn man jemanden anruft, ertönt ja auch keine Ansage, die sagt: “Hier ist das Telefon von XY. Wenn Sie jetzt wirklich mit XY telefonieren möchten, sagen Sie bitte ‘Weiter’.”

Trotzdem kann es vorkommen, dass man so eine Startseite bauen muss, z.B. wenn man nur ein Design umsetzt, das jemand anders vorgibt. Und dann ist es meistens auch noch so, dass das, was auf der Startseite stehen soll, mittig auf der Seite positioniert sein soll. Ist man in einer solchen Lage, hat man es meist mit einem der gefürchtetsten Probleme beim Gestalten mit validem XHTML und CSS zu tun: Vertikale Zentrierung.

Viel Frust bleibt einem erspart, wenn man weiß, dass die CSS-Eigenschaft “vertical-align” nur auf Inline-Elemente anzuwenden ist. Es ist kein Browser-Fehlverhalten, dass die vertikale Zentrierung eines DIV-Elements damit nicht funktioniert. Aber auch die Annahme, man könne mit “vertical-align” folglich ein Inline-Element innerhalb eines Block-Elements ausrichten, ist falsch: Die Ausrichtung erfolgt relativ zur Zeilenhöhe, nicht in Bezug auf die Höhe des umgebenden Block-Elements.

Screenshot: Vertical Align

“height” vs. “line-height”: Die Ausrichtung mit “vertical-align” erfolgt relativ zur Zeilenhöhe.

Wie in der Abbildung zu sehen ist, funktioniert “vertical-align”, richtig angewandt, tatsächlich wie gewünscht. Im Beispiel ist das auch ganz einfach, weil die tatsächliche Höhe, in deren Mitte der Text positioniert werden soll, bekannt ist. Das Problem bei der Startseite ist jedoch, dass man eben keine Kenntnis von der Höhe des Browserfensters hat. Es funktioniert auch nicht mit der Angabe line-height: 100%;, weil die in Prozent angebene Zeilenhöhe relativ zur Schriftgröße ermittelt wird.

Im folgenden möchte ich einen Workaround vorstellen, der geeignet ist, ein Element, dessen Höhe bekannt ist, mit wenig Aufwand - also ohne JavaScripts, ohne CSS-Hacks, ohne browserspezifische CSS-Regeln - vertikal auf der Seite zu positionieren. Die Methode ist so nicht dazu gedacht und geeignet, komplette, komlexe Layouts vertikal auszurichten. Prinzipiell sollte die Lösung jedoch für alle Elemente funktionieren, von denen die absolute Höhe bekannt ist.

Der Workaround basiert darauf, zunächst ein als Behälter dienendes Block-Element (im Beispiel das H1-Element) mit seiner Oberkante vertikal mittig auszurichten. Das funktioniert mit Hilfe absoluter Positionierung (position: absolute;) und der Angabe der gewünschten Differenz vom oberen Rand des Browserfensters (top: 50%;), obwohl man die tatsächliche Höhe des Browserfensters nicht kennt. Das darin enthaltene A-Element wird nun per CSS-Eigenschaft “margin-top” um die Hälfte seiner eigenen Höhe nach oben verschoben, et voilà: der Link ist vertikal zentriert. Weitere CSS-Regeln im Beispiel-Code dienen dazu, die horizontale Ausrichtung festzulegen sowie, zur Veranschaulichung, den Elementen kräftige Hintergrundfarben zuzuweisen.

Screenshot: Vertical Align mit absoluter Positionierung

Vertikale Zentrierung mit einfachen Mitteln

Beispiel ansehen

Der XHTML- sowie der CSS-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    * {
        margin: 0; padding: 0;
    }
    body {
        background: gray;
        height: 100%;
    }
    h1 {
        background: yellow;
        position: absolute;
        top: 50%;
        width: 100%;
    }
    a {
        background: orange;
        display: block;
        font-size: 50px;
        line-height: 100px;
        margin-top: -50px;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        text-align: center;
        width: 200px;
    }
    /*]]>*/
    </style>
</head>

<body>
    <h1>
        <a href="#">Link</a>
    </h1>
</body>
</html>

Kommentare:

  1. Christoph:

    Genau dieses Problem hatte ich vor ca. 2Wochen. Danke für den Lösungsvorschlag. Gibt es für komplexere Seiten denn etwas vergleichbares? Ich such noch. Bisher habe ich doch immer eine Tabelle genutzt..

    13. Dezember 2005, 21:39
  2. Roman Röhrig:

    Selbst ausprobieren! Das A-Element in meinem Beispiel könnte ja durchaus auch ein anderes HTML-Element mit absoluter Höhe sein, welches wiederum weitere HTML-Elemente enthalten könnte. Ob’s funktioniert - keine Ahnung. Ich halte derartiges bei den aktuellen CSS-Möglichkeiten für nicht sehr sinnvoll.

    13. Dezember 2005, 23:01
  3. markus hammer:

    wenn man weis welche größe das mittig zu positionierende element hat:

    body { margin: 0; padding: 0; }

    .myelement { position: absolute; left: 50%; top: 50%; margin-left: -200px; margin-top: -150px; width: 400px; height: 300px; border: 1px solid; }

    btw. wie kann ich code pasten? die zeile unter der eingabe ist etwas kryptisch.

    16. Dezember 2005, 12:16
  4. Gerd Brunzema:

    Vielen Dank für den Ansatz! Kann ich gut gebrauchen. Ich habe aber noch ein etwas komplitierters Problem:

    In einer Startseite soll eine Titelgrafik wechselnder Größe vertikal und horizontal zentriert werden (Sie wird etwa wöchentlich ausgetauscht). Es ist also die Höhe und Breite sowohl des Browserfensters als auch des anzuzeigenden Elements unbekannt.

    Frage: Ist das überhaupt möglich, und wenn ja, wie? Alle mir bekannten Lösungsansätze (so auch Ihrer) gehen von einer bekannten Größe des zu zentrierenden Elements aus. Vielleicht haben Sie eine Idee? Bei den Prozentualangaben, die ich probiert habe, fliegen die Elemente wild durch die Gegend.

    22. Dezember 2005, 22:14
  5. Andreas Heidenreich:

    Auch ich habe zur Zeit genau das Problem. Ich soll ein Layout umsetzen, bei dem der Inhalt vertikal zentriert ist. Ich stieß nun schon auf vielen Büchern und Seiten genau auf die Lösung mit den negativen margins. Niemand scheint jedoch zu bemerken, dass es ein gravierendes Problem bei dieser Lösung gibt: ist das Browserfenster kleiner als der zentrierte Inhalt, hat man keine Möglichkeit, zu den oberen Elementen (bzw. linken) Elementen zu gelangen, auch nicht durch scrollen. Das macht es eigentlich unmöglich,m diesen Weg zu gehen.

    9. Januar 2006, 12:03
  6. Ralf Kobert:

    Sehr interessanter und hilfreicher Artikel, der gut strukturiert aufgebaut ist.

    Gibt es nun auch eine Möglichkeit komplexere Layouts vertikal im Browserfenster zu zentrieren?

    19. Januar 2006, 00:09
  7. Roman Röhrig:

    @Ralf & Gerd: Ich selbst werde dieses Thema nicht weiter in diese Richtung (komplexere Layouts) verfolgen, da mir dies nicht besonders sinnvoll erscheint. Auf ein gravierendes Problem hat Andreas ja bereits in seinem Kommentar hingewiesen. Wer etwas interessantes zum Thema herausfindet, ist natürlich herzlich eingeladen, dies hier in einem Kommentar mitzuteilen.

    19. Januar 2006, 01:04
  8. Jens Grochtdreis:

    Eine Ebene vertikal und horizontal zentrieren

    13. März 2006, 12:38
  9. ()((():

    eine interessante Möglichkeit ist vielleicht folgendes:

    Wenn man das Parent als diplay:table-cell; definiert und ihm außerdem vertical-align:middle; gibt, wird das innere Element vertikal zentriert.

    Angewandt habe ich das für eine Galerie, in der das Konstrukt auftritt.

    Klappt aber nicht im IE, nur in FF und Opera, weitere nicht getestet….

    28. Juni 2006, 01:04
  10. Dunlop:

    Dieses Problem hatte ich schon bei ienigen Seiten. Diese Lösung ist recht interessant, danke für die Idee.

    20. Juli 2006, 09:22
  11. OMG Hotspot:

    Okay, gutes Tutorial. Habe ich mir so noch garnicht versucht. Scheint aber zu funktionieren.

    Ich hoffe bei CSS3 wird es auch ohne Hacks möglich sein, vertical aligns zu setzen.

    28. August 2006, 10:21
  12. Stefan Wertheim:

    Da ich mich erst heute mit dem Problem befassen muss bin ich sehr dankbar über die guten Lösungsvorschläge. Denn was tut man nicht alles für den Kunden.

    Gruß

    Stefan

    31. August 2006, 10:58
  13. Rand:

    Klasse, vielen Dank für diese gut beschriebene Lösung!

    25. November 2006, 19:24
  14. Roman Röhrig:

    Es gibt mittlerweile eine Lösung für das Problem mit Browserfenstern, die kleiner als der anzuzeigende Inhalt sind, zu umgehen.

    30. November 2006, 12:12
  15. Ralf Natern:
    Ein wie ich finde sehr gelungener Ansatz, und eine wirklich gute Idee. Bisher habe ich immer Tabellen benutzt. Das wird sich jetzt zum teil wohl ändern..

    30. November 2006, 13:18
  16. Stefan:

    Danke Roman, die Lösung für die kleinen Fenster ist genau das, was ich gesucht habe.

    24. Januar 2007, 02:08

XML-Feed


Login