I have a very simple test html site like this:
<html>
<body>
<div style="height:500px">
<img style="height:200px; vertical-align:middle;" src="http://i.imgur.com/BidLR.jpg" />
</div>
</body>
</html>
But the image is not displayed vertically centered in the div. (At least in Google Chrome). What does it need that the image is rendered centered?
vertical-alignwill vertically center the image on it’s line. You need to set aline-heightthat’s taller than the image.See the style area:
http://jsfiddle.net/5ugDx/