Block-Elemente vertikal ausrichten

Eine häufige Aufgabe bei der Erstellung von Websites ist, Elemente vertikal auszurichten und dabei vor allem zu zentrieren. Mit der Eigenschaft vertical-align ist das zwar möglich, jedoch nur bei Inline-Elementen und Tabellenzellen. Es gibt im Grunde keine Eigenschaft, die gezielt für die vertikale Ausrichtung von Block-Elementen gedacht ist. Stattdessen muss man gewisse Hilfsmittel verwenden, mit denen das möglich ist. Man kann entweder die Inhalte von Block-Elementen oder die Block-Elemente an sich vertikal ausrichten bzw. zentrieren.

Inhalte in Block-Elementen vertikal zentrieren

Die Inhalte eines Block-Elements kann man vertikal zentrieren, indem man dem Block-Element über line-height eine Zeilenhöhe zuweist. Die Inhalte werden automatisch zentriert bzw. an der Grundlinie ausgerichtet, die etwas unterhalb der vertikalen Mitte liegt. Der Nachteil bei dieser Variante ist, dass es nur für einzeilige Inhalte geeignet sind, da die einzelnen Zeilen wegen der Zeilenhöhe zu weit auseinander liegen würden. Nachfolgend ein Beispielcode in CSS und HTML.

.selektor {
height: 100px;
width: 300px;
line-height: 100px;
border: 1px solid #001055;
}

<div class="selektor">
Einzeiliger Text
</div>

Die Codes würden im Browser für die folgende Darstellung sorgen.

Text vertikal mit line-height zentrieren

Block-Elemente vertikal ausrichten

Wenn man die Block-Elemente an sich vertikal ausrichten möchte, kann man dem Block-Element mit der Eigenschaft den Wert table-cell zuweisen. Dadurch kann die Eigenschaft vertical-align auch beim Block-Element angewendet werden. Der Vorteil hierbei ist, dass man nicht nur darauf beschränkt ist, das Block-Element zu zentrieren. Man kann das Block-Element z.B. auch unten (bottom) positionieren.

Etwas nachteilig bei dieser Variante ist, dass sich das Element wie ein Inline-Element verhält. Das kann jedoch aufgehoben werden, indem man das Element in ein anderes Block-Element positioniert. Somit hat man einen äußeren und inneren Block-Element, denen man wie bei einer normalen Tabelle die Eigenschaften display: table; (außen) und display: table-cell; (innen) zuweist. Ein Beispielcode.

.aussen{
height: 100px;
display: table;
}

.innen {
height: 100px;
width: 300px;
display: table-cell;
vertical-align: middle;
border: 1px solid #001055;
}

<div class="aussen">
  <div class="innen">
    <p>Text im Absatz</p>
    <p>Text im Absatz</p>
  </div>
</div>

Die Codes würden im Browser für die folgende Darstellung sorgen.

Text und Bild vertikal mittig zentrieren

Es kann manchmal vorkommen, dass man ein Text und Bild vertikal mittig zentrieren möchte, die nebeneinander positioniert sind. Über die Variante mit der Zeilenhöhe werden die Elemente genau genommen an der Grundlinie ausgerichtet und das sorgt insbesondere bei Bildern dafür, dass diese nicht genau mittig positioniert werden. Mit dem folgenden Codes kann man Text und Bild mittig zentrieren. Auch hierbei gilt, dass das nur bei einzeiligen Inhalte geeignet ist, da durch die Bildhöhe die line-box vergrößert wird und der Abstand zur nächsten Zeile zu groß sein kann.

.aussen{
height: 100px;
display: table;
}

.innen {
height: 100px;
width: 300px;
display: table-cell;
vertical-align: middle;
border: 1px solid #001055;
}

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

<div class="aussen">
  <div class="innen">
    <p>Text im Absatz <span class="bild"><img src="bild.jpg"></span></p>
  </div>
</div>

Die Darstellung im Browser würde bei den Codes wie folgt sein.

Text und Bild vertikal mittig zentrieren

Bei dieser Variante kann man den Text und das Bild mit vertical-align auch anders ausrichten, z.B. unten.