How to vertically align an image inside a div with dynamic height?

Question

What we have is a div that contains an image that a user uploads. This is the code:

HTML:

<div class="container_img">
    <img height="120" width="150" src="[image name].jpg">
</div>

CSS:

div.container_img {
    overflow: hidden;
    width: 150px;
    height: 150px;
}

Our problem is if the image the user uploads has a height smaller than 150px, there's a big space at the bottom. So we want to vertically align the image so that it doesn't look like it's just floating.

I've tried searching for solutions on the net but I can't find one that works with dynamic images inside a DIV. Some solutions require that you know the dimensions of the image.

Has anybody had this problem and solved it?

Answer 1

You need to use JavaScript/jQuery to detect image height. CSS is not a dynamic language and you cannot detect height using pure css. Using jQuery you can do

jQuery

var $img = $('div.container_img img');
var h = $img.height();
$img.css('margin-top', + h / -2 + "px"); //margin-top should be negative half of image height. This will center the image vertically when combined with position:absolute and top:50%.

CSS

div.container_img {
    position:relative; 
    width: 150px;
    height: 300px;
}

div.container_img img{
    position:absolute;
    top:50%;
}

Check working example at http://jsfiddle.net/nQ4uu/2/

Answer 2

div.container_img {
    display: table-cell;
    vertical-align: middle;
    /* other attributes */
}

works but I'm not sure if it does on all IE versions.

Answer 3

You can achieve this using flex in css:

div.container_img {
    position:flex; 
     width: 150px;
    height: 150px;
    justify-content: center;
}

div.container_img img{
  margin-top: auto;
  margin-bottom: auto;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

Answer 4

I think you won't be able to align the image vertically using any straight forward technique. You can see this for aligning the image horizontally though...

Answer 5

这并不容易，请查看此页面http://www.vdotmedia.com/demo/css-vertically-center.html

Answer 6

I know this is an old question but i think there is abetter answer with CSS alone

DEMO jsFiddle

HTML

 <div id="centered"></div>

CSS

#centered {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    height: 100px;
    width: 300px;
    margin: auto;
    background-color: grey;
}

That's it!