Vertically centering an image with max-height and max-width

Question

I have the following html code:

<div style="border: 3px coral solid;width:400px;height:400px;background:#D4D0C8;">
    <img style="max-width:400px;max-height:400px;" src="myImage.jpg">
</div>

Using these styles images with a width > 400 pixels are resized but remain at the top of the div. Is there some way to vertically center them?

@Samidjo: You're on the right track. NGLN's solution below has the styles needed to vertically center an image using max-width. I still have the problem despite this and will post an answer if a fix is found. — James P., Jul 09 '11 at 19:28

score 12 · Accepted Answer · answered Jul 09 '11 at 14:37

12

CSS:

div {
    border: 3px solid coral;
    width: 400px;
    height: 400px;
    background: #d4d0c8;
    line-height: 400px;
    text-align: center;
}
img {
    max-width:400px;
    max-height:400px;
    vertical-align: middle;
}

See demo fiddle.

answered Jul 09 '11 at 14:37

NGLN

43,011
8
105
200

Thanks NGLN. This appears to do the trick but I'm getting some odd behaviour. Your example and the complete code from my page centers correctly on jsFiddle. However, on the full page the images are centered vertically only on Firefox. There's perhaps a conflict but I can't see anything obvious on Firebug. – James P. Jul 09 '11 at 17:37
@James Could you share the link to your page? – NGLN Jul 09 '11 at 17:40
Sure. I'll post a link temporarily under this reply. Code could prettier but I'm a bit pressed for time and will clean up afterwards. I don't see anything obvious like a definition for a div or img. – James P. Jul 09 '11 at 18:17
@James Where is the image? What do you mean with "I don't see anything..."? In your question you clearly stated an img tag. Where did that come from then? :confused: – NGLN Jul 09 '11 at 18:23
Can you see the link posted below? The image is in the center and there are also three images on the left and right. – James P. Jul 09 '11 at 18:31
NGLN thanks for looking into this. I posted a solution below that does the trick. – James P. Jul 11 '11 at 15:19
Nice trick with the line.height, but you need to know the height of the div in pixels. Percentage don't work as expected for line-height unfortunately. – Pierre Henry Apr 21 '15 at 15:35
@Pierre Sure. If you want a flexible height solution, then take a look at [this answer](http://stackoverflow.com/a/7277724/757830). – NGLN Apr 21 '15 at 16:08
@NGLN Thanks I'll have a look! – Pierre Henry Apr 21 '15 at 20:01

James P. · Answer 2 · 2011-07-12T15:46:10.947

Ok, I seem to have found where the problem lies. The image does center properly on the link provided because it is inside an iframe. Inside a normal page flow the image will display at the top of it's enclosing container.

As table et display: table-cell are broken in IE the fix requires a minimal enclosing table:

<html>
<head>
<style type="text/css">
#content { border:solid 1px;}   
img{ max-width:400px;max-height:400px;margin:auto;}
#page-table {
    height: 400px;
    width: 400px;
    border-collapse: collapse;
    text-align: center;
    border:solid 1px;
}
#page-td {
    height: 100%;
    padding: 0;
    vertical-align: middle;
}

div#content2{
    border:solid 1px;
    width: 400px;
    height: 400px;
    /*line-height: 400px;*/
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}
img#image2 {
    max-width:400px;
    max-height:400px;
    vertical-align: middle;
}
div#enclosingdiv2 {
    border:solid 1px;
}

</style>
</head>
<body>

With table:
<table id="page-table"><tr><td id="page-td">
<div id="content">
<img src="http://lorempixum.com/250/250/abstract">
</div>
</td></tr></table>

Without:
<div id="content2">
<div id="enclosingdiv2">
<img id="image2" src="http://lorempixum.com/250/250/abstract">
<div>
</div>

</body>
</html>

Vertically centering an image with max-height and max-width

2 Answers2