It's not working in IE7 because IE7 does not support display: table-cell
.
I've even told you this before.
Here's an alternative vertical centering technique that does work in IE7: How to vertically align an image inside div
Here's the simplest version of the technique from the above answer applied to your code: http://jsfiddle.net/thirtydot/Y8AvM/1/
HTML:
<div class="inlay">
<span class="helper"></span><img src="http://goldstudios.net/uploader/uploads/Wildebeest_$1$2ryes3hf$Fl0tEsFaORwBW2seye9qN0.jpg" />
</div>?
CSS:
html, body {
height: 100%;
background: #ddd;
}
.inlay {
height: 100%;
text-align: center;
}
.inlay img {
vertical-align: middle;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
It works in all modern browsers, and of course, IE7.
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…