div內的另一個垂直對齊問題

Question

我似乎永遠無法獲得垂直對齊屬性工作。 我有一個簡單的div，里面有一張小圖片（高40像素），我需要文本在中間垂直對齊。 有人可以闡明我在這里做錯了什么嗎？ 謝謝

HTML：

<div id="back"><img src="../../images/back-button-1.jpg" style="padding-right:10px;" width="40" height="40" alt="back" />Back</div>

CSS：

#back{
width:auto;
height:40px;
background:#C36;
font-family:arial,verdana,helvetica,sans-serif;
font-size:15px;
color:#333333;}

Answer 1

添加此規則：

#back img {
    vertical-align:middle;
}

jsFiddle示例

Answer 2

在這種情況下，將“ line-height”設置為內聯元素上容器的高度也可以很好地工作，但前提是它是一行文本。