Vertical aligning of div elements within list items

Question

I have a layout like this .
How can I align each div.product_image to the vertical middle of <li> items if I don't have fixed height of list item or image and in the same time be sure that images won't overlap each other?

Answer 1

A table may work, but you won't like it. Then JS may help. The "normal" way to do it would need to use min-height & min-width in <li> , then using 2 divs. 1st position: absolute; 1px*1px top:50%;left:50%; , 2nd a relative div left:-Xpx; top:-Ypx; width:2*X; height:2*Y; left:-Xpx; top:-Ypx; width:2*X; height:2*Y; (<- that would be static), then just place whatever you want inside.