How to vertically and horizontally align image in div?

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:

enter image description here

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.

Hey Mr. Alien, I believe you're correct. Thanks for the direction :) — Mike, Nov 21 '12 at 03:07

score 1 · Accepted Answer · answered Nov 21 '12 at 03:06

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.

answered Nov 21 '12 at 03:06

Farhan Ahmad

5,148
6
40
69

Farhan, thank you sooo much for showing me `max-height` and `max-width`. Pretty amazing how that has solved a ton of my issues. As for the `vertical-align` I can't seem to get it to work correctly. Let me play with it some more :) – Mike Nov 21 '12 at 03:14
@Mike You can't use `vertical-align: middle;` unless and until you are using a table or `display: table-cell;` – Mr. Alien Nov 21 '12 at 03:29

score 1 · Answer 2 · answered Nov 21 '12 at 03:36

For dynamic vertical alignment where you cant use position absolute i suggest using javascript for an absolute fix across all situations but you can use several techniques seen in the following Guide for vertical alignment

$(document).ready(function(){
    var image = $('#product-image');
    var container = $(image).parent();

    var margin = (container.height() - image.height()) / 2;
    image.css('margin-top', margin); 
});

with the following CSS

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

#product-image
{
    margin:2px auto;
    width:194px;
    height:145px;
    border:1px solid #999;
}

score 1 · Answer 3 · answered Nov 21 '12 at 05:40

<div id="product">

    <div id="product-Inner">

        <img id="product-image" src="imageURL" />

    <div>

<div>

style css

#product {

    float:left;
    display: table;
    box-sizing: border-box;
    margin:5px;
    width:200px;
    height:200px;
    border:1px solid #999;
    text-align:center;

}

#product-Inner {

    display: table-cell;
    vertical-align: middle;
    text-align:center;
}

#product-image {

    box-sizing: border-box;
    max-height: 100%;
    max-width: 100%;
    border:1px solid #999;


}

Shailender Arora · Answer 4 · 2012-11-21T05:46:12.423

1

you can easily get your desired results through display:table-cell & vertical-align:middle;

CSS

   #parent {
    width:200px;
    height:200px;
    display:table;
    background-color: black;
    float:left;
    margin:5px;
}

#parent-image {
   display:table-cell;
   vertical-align:middle;
   text-align:center;
}

DEMO

edited Nov 21 '12 at 05:46

answered Nov 21 '12 at 05:41

Shailender Arora

7,674
2
31
35

How to vertically and horizontally align image in div?

4 Answers4