Vertical aligning an img element within a div

Question

I'm trying to vertical align my ing element within a div. Only problem is the img element doesn't have a fixed height. I tried vertical-align in combination with table, table-cell and inline-block and inline. None of this seems to work. Does anyone have any idea how I can achieve this? I made a JSFiddle that recreates my problem.

JsFiddle: http://jsfiddle.net/6gMcK/1/

HTML:

<div id="image-container">
    <img src="http://www.image2012.com/images/2013/03/landscapes-landscape-free.jpg">
</div>

CSS:

#image-container {
    padding:5px;
    height: 135px;
    border: 1px solid black;
    display: table;
    float:left;
}

#image-container img{
    display: table-cell;
    max-height:125px;

    vertical-align: middle;
}

Read here how: http://stackoverflow.com/questions/7336503/how-to-vertical-align-image-inside-div - Also I updated your fiddle to your specs http://jsfiddle.net/6gMcK/2/ — Henrik Andersson, Apr 24 '13 at 08:40
@MarcelGwerder No, I believe this should've been dug out before asking the question since everything else is just a copy of it. I don't believe in duplicate or copying answers. — Henrik Andersson, Apr 24 '13 at 08:48
Thanks for helping me out. This doesn't work on a floated parent though. I nested my img in another container that isn't floated. Thanks for your help! — Frank Kluytmans, Apr 24 '13 at 08:50
@FrankKluytmans exactly, thats why i removed float:left from your fiddle. — Henrik Andersson, Apr 24 '13 at 08:53

score 1 · Answer 1 · edited Apr 24 '13 at 12:05

1

Change some properties as like this

   #image-container {
    padding: 5px;
    height: 135px;
    border: 1px solid black;
    display: table-cell;
    vertical-align: middle;
}

#image-container img{
    max-height: 125px;
    display: block;
}

Live Demo

edited Apr 24 '13 at 12:05

skobaljic

9,379
1
25
51

answered Apr 24 '13 at 08:44

Rohit Azad Malik

31,410
17
69
97

score 0 · Answer 2 · answered Apr 24 '13 at 09:48

A solution I often use is to have the image be the background of the image container. This way I can set the width and height to whatever it needs to be and for any image and size of the container, with a little absolute positioning and the full image is always displayed.

#image-container {
    position:absolute;
    left:30%;
    right:30%;
    min-width:135px;
    height: 135px;

    border: 1px solid black;
    background-image:url('image.png');
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
}

Of course you can always play around with the values for the width depending on what your needs are. I always found this to be a simple solution for displaying images.

Please note: These are CSS3 properties, so this solution will work on modern browsers, but not on IE<9. — skobaljic, Apr 24 '13 at 12:13

Danield · Answer 3 · 2013-04-24T10:14:27.420

0

If you just have one image in the container , and the container has a fixed height, then you could simply apply line-height = container_height_px to the container

Try this demo

edited Apr 24 '13 at 10:14

answered Apr 24 '13 at 09:55

Danield

121,619
37
226
255

If we reduce the img-container height to 100px, we can see the image is not exactly vertically centered (which may be annoying in some cases), cause it still has default display: inline. Best cross-browser solution for vertical centering is to use old table and give the img display: block. It would work on 20th century browsers too. – skobaljic Apr 24 '13 at 12:10
The question didn't say that the container had a variable height, it said the the **img** had a variable height – Danield Apr 24 '13 at 12:21

Vertical aligning an img element within a div

3 Answers3