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”设置为内联元素上容器的高度也可以很好地工作，但前提是它是一行文本。