vertical align center image in fixed size div

Question

I have a div which is 145px X 145px. I have an img inside this dive. The img could be of any size (longest side being 130px). I would like the image to be centered vertically in the div. Everything that I have tried works in most browsers, but not IE7. I need something that will work in IE7.

Answer 1

Not sure about IE7 but for IE9 and rest of the modern browsers following works.

    .picturecontainer{
        width:800px;
        height:800px;
        border:solid 1px;
        display:table-cell;
        vertical-align:middle;

    }
    .horizontalcenter{
        display:block;
        margin-left:auto;
        margin-right:auto;
        vertical-align:middle;
    }

To use it

<div class="picturecontainer"><img src="" class="horizontalcenter"/></div>

This places images at dead centre.

Answer 2

Not sure what you have tried so far but the vertical-align CSS property should work if the images are displayed as inline elements.

Some info on vertical-align: http://www.w3schools.com/css/pr_pos_vertical-align.asp

If you have to account for all image heights, that is pretty much the only way without using JavaScript.

If the images are not inline elements and you only had to accommodate images of a consistent height, you could do something like this:

img {
    margin-top: -50px; /* This number should be half the height of your image */
    position: absolute;
        top: 50%;
}

Otherwise the only way I can think to accomodate images of varying height would be to do something similar with your CSS but set the negative margin to half of the image's height with JS.

Answer 3

You can replace the image by a background on the div like this :

<div style="background:url(myimage.jpg) no-repeat center center"></div>

Answer 4

I created a little jQuery code to do this without having to use nasty tables:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">
imagepos = function () {
    $('img').each(function () {  
            imgheight = Math.round($(this).height() / 2);
            imgwidth = Math.round($(this).width() / 2);    
            $(this).attr("style", "margin-top: -" + imgheight + "px; margin-left: -" + imgwidth + "px; opacity:1;");
        });
    }   
$(window).load(imagepos);
</script>

And you also need a little bit of css:

div
{
position:relative;
}
img
{
display:block;
margin:auto;
max-width:100%;
position:absolute;
top:50%;
left:50%;
opacity:0;
}

Answer 5

Using the line-height property solved the problem for me.

Reference: vertical-align image in div

HTML:

<div class="img_thumb">
    <a class="images_class" href="large.jpg" rel="images"><img src="http://www.minfo.pt/fotos/_cache/produtos/0/068.M.976010002__thumbnail_50_50_true_sharpen_1_1.JPG" title="img_title" alt="img_alt" /></a>
</div>

CSS:

.img_thumb {
    float: left;
    height: 120px;
    margin-bottom: 5px;
    margin-left: 9px;
    position: relative;
    width: 147px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    line-height:120px;
    text-align:center;
}

.img_thumb img {
    vertical-align: middle;
}

Answer 6

here's a cross-browser solution:

<div class="img-container"><img src="picture.png" class="cropped"/></div>


div.img-container {
     width: 390px;
     height: 211px;
     position: relative;
     margin-left: auto;
     margin-right: auto;
     overflow: hidden;
 }
img.cropped {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}