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

最好的方法是什么

这是我的html：

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

和

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

提前谢谢

试试这个：

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

---

点击这里。这就是我尝试的方式。不确定是否有更干净的方法。有什么建议吗

HTML:

最后，这里是

---

谢谢

谢谢卡拉卡斯，这对这个特定的问题有效，但是在所有情况下都有通用的方法来处理这个问题吗？我一直在使用下面的解决方案，这需要更多的时间，但似乎有效。不确定一个是否更好：）

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

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

.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;
}