How to vertically center an image inside an .image_container that responds to page resizing

Question

I am currently using the image container (below)

}
.image_container {
width: 570px;
height: 120px;
margin: 275px auto 0;
}

This code horizontally centers the div just fine, but I cannot figure out how to set automatic vertical alignment. Any advice?

Refer to this question, http://stackoverflow.com/questions/356809/best-way-to-center-a-div-on-a-page-vertically-and-horizontally?rq=1. — Josh Powell, Nov 13 '13 at 05:28
Doesn't seem to work. The item in the iframe jumps to the top of the page and stays horizontally centered. The top margin is able to keep it on the page in the right spot with my current screen resolution of 1600x900, but on larger resolutions the top margin needs to automatically shift to center and with my current code that won't happen. — Brandon Covington, Nov 13 '13 at 05:32

score 0 · Answer 1 · answered Nov 13 '13 at 05:27

As long as you have static heights to work with, you can use a couple of strategies for vertical centering.

The most simple is to combine line-height and vertical-align: middle:

.image_container {
    width: 570px;
    height: 120px;
    margin: 275px auto 0;
    line-height: 120px;
}
.image_container img {
     vertical-align: middle;
}

<div class="image_container">
    <img src="http://jsfiddle.net/img/logo.png" />    
</div>

See it: http://jsfiddle.net/ka8Hw/1/ (note: I removed your top margin for the demo)

The line-height rule is a sort-of hacky way for inline elements to treat the entire box's height as a single line. The image will treat the middle of the box as the line that it needs to align with. But, it will align so the bottom of the image rides the midpoint. So, we use vertical-align:middle to tell the image to align its midpoint with the line's midpoint.

Documentation

line-height - https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
vertical-align - https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

score 0 · Answer 2 · answered Nov 13 '13 at 05:54

you need to set text-align:center for container and line-height:120px as the height of container, then set vertical-align:middle to img in the container.

jsFiddle

center aligned image vertically and horizontally

HTML

<div class="image_container">
    <img src="http://placehold.it/70x70"/>
</div>

CSS

.image_container {
    width: 570px;
    height: 120px;
    margin: 100px auto 0;

    background:green;

    line-height:120px;
    text-align:center;
}

.image_container img{
    vertical-align:middle;
}

radha · Answer 3 · 2013-11-13T06:25:09.233

-1

try this,

.image_container {
    width:400px;
    height: 500px;
    background:#000;
    display: table-cell;
    vertical-align: middle;
    text-align:center;
}

http://jsfiddle.net/ka8Hw/3/

edited Nov 13 '13 at 06:25

answered Nov 13 '13 at 05:30

radha

782
4
8

This will scale the image so it is 150x150. Did you try this, say for example, with an image that is 50x50? – Chris Baker Nov 13 '13 at 06:09
if u want to give width,height mention it otherwise leave it. – radha Nov 13 '13 at 06:26

How to vertically center an image inside an .image_container that responds to page resizing

3 Answers3