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

<强> Demo

Answer 2

OP在这里。这是我尝试这样做的方式。不确定是否有更清洁的方式。有什么建议吗？

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

由于

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

2 个答案: