Vertical image centering in CSS

by karim79

HTML

<div id="container">
    <img src="http://1.1.1.5/bmi/i.ebayimg.com/00/$T2eC16R,!y8E9s2fjLJ9BP9fY06WMw~~_27.JPG">
<span></span>
</div>

CSS

#container {
    position: relative;
    height: 500px;
    width: 500px;
    background-color: yellow;
    text-align: center;
    line-height: 500px;
}

img {
    display: inline-block;
    height: 100px;       
}

container * {
    vertical-align: middle;
}

#container span {   
    height: 100%;
}