ein div neben einem anderen div vertikal zentrieren

[freakyBOi]

Hi,

ich habe an sich ein sehr simples Problem, was ich aber nicht lösen konnte.

Die folgenden zwei divs sind nebeneinander angeordnet, wobei ich möchte das der Text vertikal zentriert neben dem Bild ist:

<div style="float:left">Text</div>

<div style="float:right">  
   <img src="webpics/bild.gif" width="170" height="144"/>
</div>

Ich hab auch schon versucht einen weiteren div darum zu packen und dann vertical-align:middle anzuwenden, leider ohne Erfolg...

 

[threadi]

Ist das div um das Bild nötig? Wenn nein, weglassen und das Bild direkt floaten.

Unabhängig davon wäre die Lösung, dass Du die Blockelemente zu Tabellenelementen machst.

<div style="float:left;display: table-cell;vertical-align: middle;">Text</div>

Dadurch würde der Inhalt wie in Tabellenzellen üblich vertikal mittig ausgerichtet werden.

Hinweis: der IE <= 7 kapiert das leider nicht. Für den müsstest Du sowas mit einer Tabelle lösen.

 

[freakyBOi]

Hi,

danke für die Antwort.

Ich hätte nicht gedacht, dass ich dafür extra eine Tabelle benutzen muss, aber wenigstens hab ichs jetzt mit einem Table hinbekommen.

 

[webrakete]

Das ganze haben wir in unserem Blog ausführlich mit Bildern beschrieben:

DIV in DIV horizontal zentrieren