CODEWITHSUNDEEP
cssvertical-alignment
user979331
user979331

Reputation: 11961

CSS Vertical-alignment of an image inside a div

I have this div and inside the div is an image, and what I am trying to do is vertically align the image to be centered in the middle and nothing I try seems to work...

<div style=" height: 200px; vertical-align: middle; width: 225px;">
<img width="225" src="upload/home5.jpg">
</div>

I've also tried this adding a vertical-align:middle; to the image as well, but that didn't work.

Anyone got any ideas?

I forgot to mention that I am using some jQuery code and it makes my div position:absolute;

this is what my div looks like after it goes through the Jquery

<div style="position: absolute; top: 0px; left: 0px; display: block; z-index: 4; opacity: 1; width: 225px; height: 200px;">

and here is the css for the image

img {    
    background-color: #eee;
    margin: auto;
    display:block;
}

Upvotes: 0

Views: 452

Answers (1)

mrtsherman
mrtsherman

Reputation: 39902

You can use display: table-cell for this on the div. This allows vertical-align attribute to work. No support for IE7. If you need that there are other solutions.

http://jsfiddle.net/5HzpM/

div { border: 1px solid gray; display: table-cell;  }
img { vertical-align:middle; }

Upvotes: 1

Related Questions