html - 在 div 中垂直对齐文本和图像

Question

我看到一个类似的帖子是 here但我注意到没有人回答，而且当我按下 jsfiddle 时，它​​并没有居中。

我有这个当前代码，我想要完成的是将图像直接放在 div 内部的垂直中间。我试过垂直对齐并将其放在 span 和 top % 中，但似乎没有任何效果。我也在使用 Chrome，所以我不知道这是否重要。 http://jsfiddle.net/y84mx/

    <div class="hours">
    <div id="sun">
        <img src="http://jsfiddle.net/img/logo.png" alt="Opening" height="auto" width="20%" align="left" vertical-align="middle" />
        <span>Hours</span>
    </div>
    </div>

谢谢!

Answer 1

您可以使用:

#sun {
    position:relative;
}

img {
    background: #3A6F9A;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    margin:auto;
}

Updated Fiddle