html - 将图像与文本垂直对齐，包括 ie

Question

最好的方法是什么？

这是我的html：

<div id="wrapper">
   <img src="http://i.imgur.com/b8xFk.jpg" /> <span id="text">Twitter</span>
</div>

和我的CSS：

#wrapper{
  background-color:orange;
  height:60px;
  padding: 10px;
}

#wrapper img{
  vertical-align:middle;
}

#wrapper #text{
  line-height:60px; 
}

还有一个jsfiddle

如您所见，图像低于文本（至少在 Firefox 16 中）。在即，事情变得更加不稳定。将图像与文本垂直对齐以实现跨浏览器兼容性的最佳做法是什么？

提前致谢。

Answer 1

试试这个：

#wrapper img{
  vertical-align:middle;
  /*New:*/
  padding-bottom:4px;
}

演示

Answer 2

在这里。这就是我正在尝试的方式。不确定是否有更清洁的方法。有什么建议么？

HTML：

<div class="foo">
<a href="#">
    <img src="http://i.imgur.com/b8xFk.jpg" />
    <span class="bar">&nbsp;Facebook </span>
</a>

CSS：

.foo {
    height: 50px;
    line-height: 50px;
    background-color:orange;
}

.bar{
   font-size: 14px;
   line-height: 26px;
   vertical-align: middle;
}

.foo img {
    vertical-align: middle;
    margin-left: 10px;
}

.foo a{
    text-decoration: none;
}

最后，这里是jsFiddle

谢谢