Question

I’m creating an e-commerce site and I’m having trouble vertically centering all my thumbnails. The problem is all my images are different sizes and getting each one to vertical align across all browsers is turning out to be a pain. I’ve looked into the different CSS options, display-table, line-height, and others. They worked in modern browsers, but not well in IE (of course). My thought is the large big time sites are resizing the image (which I can do with no problem) and then overlaying the image on top of a background the exact size they need. Does anyone know if this is how it’s done? IF so can you direct me to some documentation of how to do this in PHP?

Or if someone thinks I can do this without all the extra work of overlaying images please let me know. In-case you want to see what I’m working with here ya go:

HTML

<a href="#">
    <div id="product">
        <div id="product-image">
            <img src="" border="0" />
        </div>
        <div id="product-name"></div>
        <div id="product-price"></div>
    </div>
</a>

OPTION 1 : JQUERY (this seemed to be my best hope, but couldn’t get it to work right)

var h = $('#product-image').height();
$.map($('#product-image img'), function(e)
{
    var top =( h- $(e).height())/2;
    $(e).css("margin-top",top);
});

OPTION 2 : CSS

#product
{
    float:left;
    margin:5px;
    width:200px;
    height:200px;
    border:1px solid #999;
}
#product-image
{
    margin:2px auto;
    width:194px;
    height:145px;
    text-align:center;
}
#product-image img
{
    max-height: 100%;
    max-width: 100%;
    vertical-align:middle;
}

EDIT

I found the working code, thanks Explosion Pills. For anyone trying to get this work I would suggest using this jQuery method and Fiddle link http://jsfiddle.net/9VfUS/1/:

WORKING JQUERY

var h = $('div#product-image').height();
$('div#product-image img').each(function ()
{
    var top = (h - $(this).height()) / 2;
    $(this).css("margin-top",top);
});​

Answer 1

If you can use JavaScript, I would do it that way as it’s surefire to get things to work the way you want. You are using .map for the wrong purpose. You want .each:

$('#product-image img').each(function () {
   var top = (h - $(this).height()) / 2;
   $(this).css("margin-top",top);
});

I assume that h was already calculated correctly as the tallest image or the height of the container or what have you. If it’s not, then you have to do that.