CSS: Vertikales Zentrieren von zwei per Float links- und rechtsbündig gesetzten Div-Elementen

CSS kann ab und an zum Problemkind werden. Das gilt insbesondere beim vertikalen Zentrieren von Elementen. Neben dem vertikalen Zentrieren über absolute Angaben ist auch die Nutzung der Eigenschaften display: table und display: table-cell wie in folgendem Beispiel beliebt:

.container{
   display: table;
}

.children{
   display: table-cell;
   vertical-align: middle;
}

In meinem Fall wollte ich in einer Kopfzeile zwei Logos jeweils links- bzw. rechtsbündig setzen, diese aber gleichzeitig vertikal zentrieren. Wird der linke Container mit float: left und sein rechtes äquivalent mit float: right ausgestattet, so zeigen die beiden beiden Container unterschiedliche Verhalten – bis auf das gewünschte.

Das gewünschte Ergebnis wird erst erreicht, wenn für das Elternelement (also den container) eine feste Breitenangabe gesetzt wird. Die jeweiligen Kindelemente müssen außerdem ein weiteres Element enthalten, welches dann passend gefloatet wird. In diesem Fall reicht es aus, lediglich das rechte (Kind-)Kind mit float: right zu versehen; das linke bleibt automatisch am linken Rand “kleben”.

HTML:

<div class="container">
<div class="left"><img src="..." /></div>
<div class="right"><div class="rightinner">Inhalt wird jetzt vertikal zentriert und bleibt am rechten Rand.</div></div>
</div>

CSS:

.container{
   display: table;
   height: 100%;
}

.left, .right{
   display: table-cell;
   vertical-align: middle;
}

.right .rightinner{
   float: right;
}

Viel Spaß und Erfolg damit!

Schreibe einen Kommentar