Question

I could use some CSS helping getting a CSS to vertically align in the middle of a div.

Here’s the code:

<div id="imageSet-container">
    <div class="image-container">
        <div class="frame-title">Title Here</div>
        <div class="frame-image">
            <a href="xxxx"><img alt="" src="XXXXXX"></a>
        </div>
        <ul class="frame-meta">
            <li>0 Comments</li>
        </ul>
    </div>

     XXX Multiple image-containers repeat here

</div>

.image-container {
 float: left;
 height: 250px;
 margin: 10px 10px 0px 0px;
 text-align: center;
 width: 250px;
}
.image-container .frame-image {
   height: 180px;
   vertical-align:middle;
}
.image-container .frame-image img {
    max-width:170px;
    max-height:200px;
}

I would like .frame-image img to be vertically aligned in the middle of .frame-image, but it’s always on the top.

ideas?

Answer 1

The best way is to use jax to set the top and left according to the div size:

img.left = div.width / 2 - img.width / 2
img.top = div.height / 2 - img.height / 2