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

添加此规则：

#back img {
    vertical-align:middle;
}

<强> jsFiddle example

Answer 2

使用＆＃34; line-height＆＃34;设置为内联元素上容器的高度也适用于这种情况，但仅当它是一行文本时才会正常工作。