CODEWITHSUNDEEP
jqueryhtmlcssheightvertical-alignment
catandmouse
catandmouse

Reputation: 11809

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:

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?

Upvotes: 11

Views: 25797

Answers (6)

Rohit Gupta
Rohit Gupta

Reputation: 1378

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

Upvotes: 0

Kevin Lynch
Kevin Lynch

Reputation: 24703

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!

Upvotes: -2

Hussein
Hussein

Reputation: 42818

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/

Upvotes: 10

Matteo Riva
Matteo Riva

Reputation: 25060

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

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

Upvotes: 1

kuyabiye
kuyabiye

Reputation: 709

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

Upvotes: 0

Naveed Butt
Naveed Butt

Reputation: 2901

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

Upvotes: 0

Related Questions