2 Zeilen und ein Bild vertikal zueinander ausrichten

Eiszwerg

Erfahrenes Mitglied
Moin liebste Community,

ich verzweifel gerade mal wieder an vertical-align.

Ich möchte 2 Zeilen Text (verschiedene Styles) untereinander und rechts daneben eine Grafik in einem vorhandenen Div so anzeigen lassen, dass die 2 Zeilen vertikal mittig zur Grafik stehen.

Ich hab mittlerweile so alle Beispiele (line-height, display:table-cell, divs, spans, p, etc pp) , die ich im Netz gefunden habe durchprobiert, aber nix hilft wirklich.

Ich meine mittlerweile verstanden zu haben, dass vertical-align sich nur auf inline-Elemente anwenden lässt (und mit Tricks auch auf Block-Elemente), aber irgendwie scheint mir das Wissen nicht zu helfen.

Kann mir jemand - für Blöde - erklären, wie ich mein Problem lösen könnte?

Vielen lieben Dank!
 
Code:
dl.test {
 width:400px;
 border:1px solid #000;
 display:table;
}

.test dt.bild {
 display:table-cell;
 vertical-align:middle;
 padding:5px;
}


.test dd.text {
 display:table-cell;
 vertical-align:middle;
} 


<dl class="test">
 <dt class="bild"><img src="bild.jpg" alt="Kurzbeschreibung" width="200"  /></dt>
 <dd class="text">Bilsbeschreibung</dd>
</dl>

Wenn es keine Bildbeschreibung ist, dann kannst du die dl auch durch div u.s.w. ersetzen.
 
Zurück