將文本與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;
}