CSS: Texte vertikal mittig positionieren

Im alten Tabellenlayout hat ein einfaches vertical-align=»center« gereicht. Wer aber auf Tabellen verzichten möchte (z. B. für eine Navigationsleiste) hat es nun nicht mehr so einfach, in allen Browsern den Text in einem div vertikal zu zentrieren.
Natürlich hat man in Elementen mittels display:table-cell die Möglichkeit eines vertical-align:, aber oft verzerren diese Div-Elemente das Layout.
Um in einem »normalen« Div-Element eine vertikale Positionierung zu erreichen, kann man folgende Methode verwenden:

/* Das Div, in welchem der Text vertikal zentriert positioniert werden soll */
div.vertical-center {
    height: 90px; //Wir brauchen eine feste Höhe
    line-height:90px;
    ... andere Eigenschaften ....
}

Indem die Zeilenhöhe auf die Höhe des Div-Containers gesetzt wird, wird der Text in sämtlichen Browsern zentriert angezeigt.
Kleiner Trick, grosse Wirkung — und das ganz ohne CSS-Hacks.


Ähnliche Artikel

Kommentare

  1. Eugen schrieb am 8.02.06:1
    Schlechte Lösung, da mehrzeilige Texte betroffen von der eingestellten Linienhöhe sind. Gut für einzeilige Zentrierungen.
  2. Julia Eckel schrieb am 8.02.06:2
    @eugen: diese Lösung ist auch hauptsächlich für Navigationen gedacht. Bei mehrzeiligen Texten muss man dann weiterhin mit display:table-cell oder entsprechenden padding-Einstellungen arbeiten.
  3. Hans-Peter schrieb am 3.05.07:3

    Danke!

    Hab’s auf einer meiner Seiten verwendet …

    Hab lang nach einen Fehler gesucht …

    Übrigens ausgezeichnete Homepage, gefällt mir sehr gut -> klar, strukturiert und dennoch souveräne Optik …

    Hab deine Beiträge über die Webeditoren gelesen …

    Hab die meisten auch schon selbst probiert, arbeite auf allen Systemen, doch vorwiegend Windows … Ich persönlich würde auch Eclipse und Maguma OpenStudio präferieren

  4. manuel schrieb am 5.07.07:4

    super Lösung für mein Menü, war langer auf der Suche!!

  5. Martin schrieb am 26.09.07:5

    Danke für den Beitrag. Wie gesagt, die Lösung ist perfekt für Navigationsleisten!

    lg
    Martin

  6. Eraser schrieb am 14.11.07:6

    Hey,
    suuuper. Danke für die Info. Genau sowas hab ich gebraucht.

    Gruß,
    E


Dein Kommentar:

Sämtliche Html-Tags werden gelöscht, der Kommentar kann mit Textile formatiert werden.
Vor dem Absenden müsst ihr euch einmal die Vorschau ansehen.