I've seen many questions like this, but i can't seem to find the answer:
i have a picture with a MAX file size of 128 by 128 px some are that size, but i also have 128*90, 60*60, 58*78 etc.
now i want to vertical align it within a div; ive seen examples with top 50% and margin -25px if it is a img with a height of 50px, but i don't know the heigth in advance...
grtz, michel
You could use JQuery to get the height of the images, then set margin: -height/2
or ..
you can set the image as the background of the containing div, something like:
background:url(image.jpg) no-repeat center center;
Something like this?
<!doctype html>
<style>
div#parent {
background:blue;
height:500px;
}
div#child {
position:relative;
top:50%;
zoom:1; /* haslayout */
}
div#ie-helper {
position:relative;
text-align:center;
top:-25%;
zoom:1; /* haslayout */
}
</style>
<div id="parent">
<div id="child"><div id="ie-helper">
<img src="http://www.gravatar.com/avatar/6f6f22658c768b1162200786e3407890?s=32&d=identicon&r=PG">
</div></div>
</div>
The only way to center something vertically in HTML/CSS so far is to use a table cell - that's the only element that supports vertical centering in ALL browsers.
For a picture however I would simply set it as the background picture of the DIV, because you can center background pictures vertically.