div內另一個垂直對齊問題

Question

我似乎無法得到垂直對齊屬性的工作。我有一個簡單的div裏面有一個小圖片（40px高），我需要文字在中間垂直對齊。有人可以澄清我在這裏做錯了什麼嗎？感謝

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

在這種情況下，使用設置爲內聯元素上容器高度的「line-height」也行得通，但僅當它是一行文本時才適用。

Answer 2

添加這條規則：

#back img { 
    vertical-align:middle; 
} 

jsFiddle example