Bilder oder Boxen mit :after oder :before vertikal zentrieren

In Zeiten, wo die meisten modernen Browser (außer IE kleiner 8) keine Schwierigkeiten mehr mit den Pseudo-Elementen :after und :before haben, sollte sich auch niemand mehr scheuen, diese immer mehr zu nutzen.

So lassen sich mit den Pseudo-Elementen :before oder :after auf sehr einfache Weise Boxen oder Bilder vertikal zentrieren. Das Beste daran ist, dass hier keine festen Höhen vergeben werden müssen. So lassen sich auf einer Seite mehrere Bilder mit unterschiedlicher Höhe positionieren.

Das folgende Beispiel ist sehr einfach gehalten und beinhaltet nur vier IMG-Elemente.

HTML Markup

<body>
 <img src="bild2.jpg" alt="" title="Bild1" style="width:100px" />
 <img src="bild5.jpg" alt="" title="Bild2" style="width:200px" />
 <img src="bild3.jpg" alt="" title="Bild3" style="width:300px" />
 <img src="bild1.jpg" alt="" title="Bild4" style="width:150px" />
</body>

Style-Angaben

html, body  {
 margin:0;
 padding:0;
 height: 100%;
 text-align:center;
}

Um vertikal positionieren zu können, müssen den Elementen html und body eine Höhe von 100 Prozent zugewiesen werden. Weiterhin werden die Außen- und Innenabstände auf 0 gesetzt. Mit text-align:center werden alle IMG-Elemente horizontal zentriert.

body:before {
 content:"";
 display:inline-block;
 height:50%;
}

Mit :before wird unmittelbar nach dem einleitenden <body> (k)ein Inhalt eingefügt. Dieser besteht in diesem Fall aus einer festgelegten Höhe von 50 Prozent. Um diese Höhe vergeben zu können, wird noch die Regel display:inline-block benötigt. Nur so kann auf das IMG-Element vertical-align:middle angewendet werden. Somit orientieren sich alle Bilder an der Grundlinie (wenn ich sie so nennen darf) des Pseudo-Inhaltes.

img {
  vertical-align:middle;
}

Der rote Balken im folgenden Beispiel dient nur zur Verdeutlichung, wie und wo sich die Bilder anordnen. Beispiel»

Wer ein DIV-Element vertikal zentrieren möchte, der muss für diesen Container auch display:inline-block; notieren.

.box {
 display:inline-block;
 vertical-align:middle;
}


Hier nochmal die gesamten Style Angaben um eine Box vertikal zu zentrieren.

* {
 margin:0;
 padding:0;
}

html, body  {
 height: 100%;
}

body {
 text-align:center;
}

body:after  {
 content:"";
 display:inline-block;
 height:50%; 
}
 
.box {
 padding:10px;
 display:inline-block;
 vertical-align:middle;
 border:1px solid #000;
}

HTML-Queltext

<body>
 <div class="box">
  <img src="bild2.jpg" alt="" title="Bild1" width="570" />
 </div>
</body>

Hier das Beispiel für eine vertikal zentrierte Box»

Hinweis

Die hier vorgestellte Möglichkeit Bilder oder Boxen vertikal zu zentrieren, war so eine spontane Idee von mir. Also darf ich davon ausgehen, dass hier noch viel verbessert werden kann. Betrachtet das Ganze also vielmehr als Anregung für eure Projekte.

erstellt am 23.12.2011

nach oben