Vertical align middle image with 2 lines of text

[duckxtales]

I'm driving myself nuts over this stupid vertical align thing. Basically i want to left align an image to 2 lines of text. I got it working on FF, but IE6 i can't seem to find a work around. I can get this working with 1 line of text, but it gets troublesome with multiple lines.

How do you guys deal with this?

-thanks

################

.cakes-list {
width: 100%;
float: left;
margin-top: 30px;
margin-left: 20px;
}

.cakes-list img {
vertical-align: middle;
margin-right: 35px;
display: inline-table;
}

.cakes-list p {
display: table-row-group;
}

.cakes-list div {
display: inline;
height: 40px;
}
/* CAKES END ###*/

<div class="cakes-list">
<img width="250" height="239" src="images/6inchheart.jpg"/>
<div>
<p>7 Inch Heart cake</p>
<p>(4 people)</p>
</div>
</div>

[Setek]

Do I not filly understand exactly what you want?
Why don't you go:
<div>
<img/>content<br/>
content
</div>
With img set to float:left?
It just seems ridiculously complicated, however you're doing it now.

duckxtales is asking for this:

-----------
¦.........¦
¦.........¦ text here
¦.........¦ second line here
¦.........¦
-----------

Basically, an image with two lines of text side-by-side, and the text is, no matter how tall the image, vertically centered next to it. An example if there was a taller image:

-----------
¦.........¦
¦.........¦
¦.........¦
¦.........¦ text here
¦.........¦ second line here
¦.........¦
¦.........¦
¦.........¦
-----------

This is much alike when I was attempting a Photo Gallery-style layout without tables, using

display: table-cell;

and

vertical-align: center;

on list items, which I couldn't get to work in IE, so it became a non-solution.

If you impose big restrictions on this it can (theoretically) be done: must be two lines of text, no more, no less, and the image has to always be the same height, you could:

Set the

div

that holds the two lines of text to

display: table-cell

and set

vertical-align: center;

along with setting a fixed-height, it should work. Until there's a taller image, more text, or someone changes the font size.

Which are pretty restricting... restrictions :)

Anybody else have any idea?

[Xapti]

Yeah I realized that setek, you can remove that part of your post if you want.
I'd reccomend relative positioning, or tables.
With relative positioning, thing will be off slightly if font size is changed larger than default, but that shouldn't be an issue.
I think using a table will work as well.

I guess another option is
p.first{position:absolute;left:239px (or whatever it was. If they are variable widths, just choose the width of the largest, or resize them); bottom:50%
p.second{position:absolute;left:239px;top:50%}

IE6 would need a small JS fix, since it doesn't support bottom.

Or for both supported, but them both in one P, and use a forced line break. This way you can position 50% down absolutely, and then add a negative margin of 1em or something.

[edited by: Xapti at 7:02 am (utc) on May 16, 2007]