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 中)。在 ie 中，事情变得更加不稳定。将图像与文本垂直对齐以实现跨浏览器兼容性的最佳做法是什么？

提前致谢。

Answer 1

试试这个:

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

Demo