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?

Possible with pure CSS: http://stackoverflow.com/questions/18516317/vertically-align-an-image-inside-a-div-with-responsive-height/18516474#18516474 — Hashem Qolami, Feb 26 '14 at 22:00

Hussein · Accepted Answer · 2011-03-25T03:47:43.793

10

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/

edited Mar 25 '11 at 03:47

answered Mar 24 '11 at 07:39

Hussein

42,480
25
113
143

Thanks for the code but when I tried it on HTML, it doesn't seem to work. Am I missing something on the jQuery script? I surrounded it with . – catandmouse Mar 25 '11 at 08:31
2

You also need to include the jQuery script `` – Hussein Mar 25 '11 at 08:43
I already included the jQuery library but it still doesn't work. This is the entire jQuery code: – catandmouse Mar 27 '11 at 09:05
Ok, nevermind my previous question. Apparently, it's because I placed the script inside the tag. I should've placed it outside the body tag. Thanks for the help! – catandmouse Mar 28 '11 at 03:57

score 1 · Answer 2 · answered Mar 24 '11 at 07:54

1

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

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

answered Mar 24 '11 at 07:54

Matteo Riva

24,728
12
72
104

score 0 · Answer 3 · answered Sep 22 '16 at 05:52

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%;
}

score 0 · Answer 4 · answered Mar 24 '11 at 07:18

0

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

answered Mar 24 '11 at 07:18

Naveed Butt

2,861
6
32
55

score 0 · Answer 5 · answered Mar 24 '11 at 07:27

0

it is not that easy, check out this page http://www.vdotmedia.com/demo/css-vertically-center.html

answered Mar 24 '11 at 07:27

kuyabiye

700
3
13

score -2 · Answer 6 · answered Aug 29 '13 at 19:58

I know this is an old question but i think there i s 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!

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

6 Answers6

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