Vertical Align Suggestions?

[dziner]

I need to create a layout for a page using inline CSS to try to match a design created by our ad agency. But I'm having a heck of a time trying to get the text to vertical align. I've done some googling for an answer to this but nothing I try seems to be working.

First let me explain the layout. The page will consist of many "layers" which will have the product image to the left, and the name/description to the right. But they want the text to be aligned vertically in the middle of the product image.

Here is the code I have so far. Can anyone recommend a way for me to vertical align the text?

<div style="padding: 0 0 0 60px;">
  <div style="float: left;"><img src="/images/easter1.png" alt="Product description" width="127" height="68" /></div>
  <div><p style="color: #9455c4; padding: 0; margin: 0; line-height: 1.3em;"><strong>Product title</strong>
  <br />Product description</p></div>
</div>

[Stomme poes]

You possibly don't have to even float the images, since they're inline. This would be the instance where I'd wrap the image with the <p> tag : )

There is a vertical align, but it works with the baseline of the text. I think you'd set the text to vertical-align: middle which if I'm rememebering right, aligns the baseline of the text to the middle of the image... I think.

Let's see, there's top, middle, bottom, sup and sub, baseline, and I think a few others. There's probably an online demo of this. This is not the deprecated valign. This is a current, valid css property.

If the product descriptions are one-liners, it might be better semantically to make it a list. You could then have the <li>s be set to the height of the image, and the image set as a background. The li's text is padded left to get out of the way of the image, and then aligning... could be done either again trying vertical-align (I'm sorry my book I reference stuff is at work and I can't remember whether you set it on the text or what...) or if the sentences are really short and the images not really tall, the line-height of the text set to the image, which would center the text vertically (but this looks really bad when you have more than one line of text).

[dziner]

I can't set the product image as the background because I will need to use alt tags for accessibility reasons. Also, each image is a different height so I'll need something that can be easily adjusted (about 20 times).

I was thinking of simply having the image in the same paragraph as the text title/description and apply a float: left to the image but this still does not solve the text vertical alignment.

[siliconscript]

try style="vertical-align:middle" if this will solve your problem.

[dziner]

try style="vertical-align:middle" if this will solve your problem.

I've tried that. Doesn't work. I think because the div which contains the text is only as large as the text. So style="vertical-align: middle;" doesn't do anything.

[Stomme poes]

vertical align only works with inline stuff so somecode thinks something is block.

I can't set the product image as the background because I will need to use alt tags for accessibility reasons.

It's the other way around-- if you have an image that's content, you need to tell everyone who doesn't get it that it's there and what it is. But if it's a photo of the product, isn't the name of the product right next to it?

[alt="the inkjet 11000 printer with dual-boot and the kitchen sink"] Inkjet 11000 Printer, $cost, Comes with dual-boot and the kitchen sink! Buy now!

But it depends on the situation. Is the image going to tell more than the text? Maybe then that info should also be in the product description.