catandmouse catandmouse - 1 year ago 61
jQuery Question

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

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


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


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 Source

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


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%.


div.container_img {
    width: 150px;
    height: 300px;

div.container_img img{

Check working example at

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download