Vertical-align product images...

[Alex Clarke]

I almost always use the Column Layout Grid for Product Listing contribution on my sites.

Normally I would ensure that all of my product images were square (e.g. 250 x 250px). However, this was bad for image and site optimisation as I would end up having to add white space to my images (to ensure they were all the same size).

This time round, I've crop my images very tightly. The end result is nice small image files, but I have an issue with the alignment of them.

I can easily use text-align to centre the images horizontally within their DIV (on the product_info page), but I cannot centre them vertically. They always align to the top.

Does anyone know how I can fix this (without using a table)?

[rstevenson]

I'm not sure if there's any way in the Grid mod itself (never used it) but you have stumbled upon one of the most aggravating lapses in sanity of the CSS designers. Why the heck didn't they implement a vertical align element?!?

There is a workaround, sort of. Given a single image of known size and a container of known size, the trick is to divide the height of the image in half, then use that figure to locate the image's center point within the container using a negative margin. But I can't imagine the horrible mash of code you'd need to do that for all of your images in rows and columns.

Your first fix was much easier: make your images all the same using white space.

BUT...

What you're actaully doing -- logically and visually -- is displaying tabular data. Sure the "data" is images, but it's still tabular data. So there's no real reason to avoid the use of a table. And it's sooooo easy to vertically align in table cells, isn't it?

HTH

Rob

[Alex Clarke]

Hi Rob,

You make a good point about tables and I guess this is the solution, but what if I want the same alignment for the image on the product_info page... use another table for this one image?

Yes, I could use the workaround, but I don't know the size of each image (as they are pretty much all different). JavaScript could be used to grab the dimensions of the images and then apply the various styles.

Still, I think I would prefer to use tables atleast for the product listings page. Nice old tables.