Website mit Vertikaler Zentrierung

Da man fremden Blogs ja nicht trauen kann (ob sie morgen noch da sind), speicher ich das hier auch gleich mal ab *euch schon sagen hör ‚machs doch ins wiki’* …. *GNAMPF*

Also Problem: Man möchte/soll ein Element (div.inhalt) Vertikal zentrieren.

Lösung:

Man packt den inhalt in einen Container, welcher wiederum bei 50% des Browserfensters (top:50%) anfängt.

div.container {
position: absolute;
top: 50%;
width: 100%;
}
div.inhalt {
margin-top: -50px;
margin-left: auto;
margin-right: auto;
height: 100px;
position: relative;
text-align: center;
}

Nachteil an der Nummer: Man muss wissen wie hoch der „inhalt“ ist, um ihn um die Hälfte seiner Höhe nach oben zu schieben. Sonst wäre nur der Oberkante des Inhalts mittig ausgerichtet.

Veröffentlicht am
Kategorisiert als PHP, Web Verschlagwortet mit ,

5 Kommentare

  1. Wenn man ein Bild (oder auch Flash-Filmchen)zentrieren will, könnte mans halbwegs automatisieren, indem man PHP (oder halt das, was drunter läuft) die Höhe auslesen lässt und per Element-Style eintragen lässt.
    Mit Text wird die Sache natürlich komplizierter, aber könnte man da über die Anzahl der Wörter nicht algorithmisch wenigstens eine Näherungslösung im Element-Style eintragen?

  2. Problem: Auf dem Server lief kein PHP. Zumal, geht das überhaupt mit PHP? Ich kannte solche Späße nur von JavaScript.

    Und eine CSS-Lösung war mir lieber als eine JS-Lösung

  3. Ah, verstehe… du wolltest das Bild per PHP einlesen um die Höhe des Bildes zu ermitteln. Ok. Wäre ne Möglichkeit, aber da sich das Bild (in meinem Fall) nie ändert und ich kein PHP zur Verfügung hatte, war das keine Option 😀

Schreibe einen Kommentar