Question

I have this particular problem. I am loading images dynamically, and each one of them has different height. I would like the image to be positions vertically in the middle of the container. Here is how the html is structured

<div class="item">
<div class="photo">
<img />
</div>
<div class="text"></div>
</div>

Please let me know if there is a possibility to do that with either jquery or css. The height of the .photo is 140px;

Answer 1

Method 1: CSS Background

If div.photo has a fixed width and height, either remove the <img /> element and add style="background:url("http://example.com/pic.png") no-repeat scroll 50% 50%;" to the specific div, or replace the <img /> element by:

<div style="height:100%;width:100%;background:url(&quot;http://example.com/pic.png&quot;) no-repeat scroll 50% 50%;"></div>

The image will be vertically centered now. The image will not shrink when it’s too large, though.

Method 2: CSS + HTML

See this Fiddle. The photo will be centered, and aligned vertically.

HTML:

<div class="photo">
    <div class="middle-photo">
        <div class="center-photo">
            <img src="http://files.fosswire.com/2008/04/ubuntu_logo.png" />
        </div>
    </div>
</div>

CSS:

.middle-photo {
    display: table;
    width: 100%;
    height: 100%;
}
.center-photo {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}