将文本与div中的图像垂直对齐

Question

我在这里看到了与此类似的帖子，但我注意到没有人回答，当我按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;
}

更新小提琴

Answer 2

对于这两个项目，都display: inline-block;
然后确保以匹配line-height的的<span>的图像的高度。

Answer 3

演示

HTML

<div id="hours"> 
    <span id="sun"> 
        <img src="http://jsfiddle.net/img/logo.png" alt="twibuffer"  /> 
    </span>  
    <span> Hours</span>
</div>

CSS

#hours {
    margin-bottom:2%;
    text-align: center;
}
#hours span {
    display: inline-block;
    vertical-align: middle;
}
#hours #sun {
    border: 1px solid red;
    /* to show the centering */
}

Answer 4

我已经更新了小提琴 ，请检查

#sun{
 line-height : auto;
 border: 1px solid;
 text-align : center;  
}

.hours{
padding-left: 2%;
padding-right: 2%;
text-align: right;
color: #000;
font-size: 40px;
}

img {
  background: #3A6F9A;
}

Answer 5

看看这个http://jsfiddle.net/chetangawai/y84mx/9/

#sun{
  text-align:center;
    display:inline-block;
    border:solid
}

.hours{
    color: #000;
    font-size: 40px;
    padding-left: 2%;
    padding-right: 2%;

}

img {
     background: #3A6F9A;
}