CODEWITHSUNDEEP
css
AnApprentice
AnApprentice

Reputation: 110960

Vertically aligning an image to the middle of a div

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?

Upvotes: 1

Views: 4096

Answers (3)

AnApprentice
AnApprentice

Reputation: 110960

Setting a line-height of 180px to .image-container .frame-image seems to work

Upvotes: 3

Ege &#214;zcan
Ege &#214;zcan

Reputation: 14269

instead of giving the parent fixed height, you can try to give padding to the child and as the upper and bottom margin will be the same, it will be in the middle of the container.

Upvotes: 0

Mohamed Nuur
Mohamed Nuur

Reputation: 5655

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

Upvotes: 0

Related Questions