Inhalt vertikal ausrichten

Vertikale Zentrierung für Inhalte, so wie in Tabellenzellen möglich, ist in Css nicht vorgesehen. Die Eigenschaft "vertical-align" bezieht sich lediglich auf die Ausrichtung innerhalb der Zeile. Dennoch hilft uns ein kleiner Hack, um diese Eigenschaft auch zum Ausrichten von Inhalten zu nutzen.

Das Prinzip geht folgendermassen: Ein Container bekommt ein Child-Element mit 100% Höhe, das nun die Zeilenhöhe bestimmt. Bekommt dieses Element die Eigenschaft "vertical-align" richten sich weitere Inhalte entsprechend aus. Den eigentlichen Inhalt steckt man nun in ein weiteres Child-Element, dass sich entsprechend ausrichtet, auch wenn der Inhalt mehrzeilig ist.

Hilfreich ist hier die Eigenschaft "display", die auf "inline-block" gesetzt wird. Damit kann das Element wie ein Block-Element eine Höhe erhalten, ohne einen Zeilenumbruch zu verursachen. Das Element, welches den eigentlichen Inhalt aufnimmt, sollte eine Breite bekommen, damit nicht das ganze Element umbricht.