Question

Possible Duplicate:
Image center align vertically and horizontally

I’m uploading images to a php file so I can resize them to a certain width or height, which ever is smaller. The image resizer I’m using is a class from phpclasses.org and it seems to be working pretty good. The problem is, not all images are the same size. Some are wide and narrow while some are almost square. So this is causing all the images to position on the top of my div and not the middle. My thought is to have CSS perfectly center the images so the different sizes look decent when viewed, but I can get them to center horizontally but not vertically. Here’s a screenshot of what I”m trying to center:

As you can see the guns are aligned on top of the div? I can’t use a hard coded figure to push it center since other images will have different heights. I need some way of determining the size of the image and figuring it from there.

Here’s the code for the div’s that the images are in:

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

Thanks for having a look.

Answer 1

#product
{
    width: 200px;
    height: 200px;
    line-height: 200px;
    text-align: center;
}
#product img
{
    vertical-align: middle;
    max-height: 200px;
    max-width: 200px;
}

Max-Height / Max-Width is used to handle images that may be too large.