使用line-height将内联内容垂直居中

Question

我试着在两个图像链接之外垂直居中一些文本。我已经这样做了几十次了，但由于某些原因，它现在不能工作。

下面是代码：http://jsfiddle.net/KRWNw/

<style type="text/css">
#social-icons {
    height:32px;
    line-height:32px;
}​
</style>

<div id="social-icons">
    Connect:
    <a href="#">
        <img src="http://mydomain.com/rodi/images/facebook.png" width="32" height="32" />
    </a>
    <a href="#">
        <img src="http://mydomain.com/rodi/images/youtube.png" width="32" height="32" />
    </a>
 </div>​

如果我把图像拿出来，文本会完全对齐，但和里面的图像不会对齐。

我做错了什么？？

谢谢!

Answer 1

img{
 vertical-align:middle;
}

使用此css。

DEMO

Answer 2

缺少的一件事是vertical-align: middle;，它只会让你走到一半。另一个问题是你的内联图像。如果你向左或向右对齐( float )图像，它将正确对齐。

http://jsfiddle.net/tU4x7/

在本例中，图像位于内容的左侧，但如果将文本包装在span中，也可以使文本浮动。不过，还有其他解决方案可以实现相同的功能。

Answer 3

img{vertical-align:middle;}

但我不会那样使用它，因为图标并不是你的页面或内容的真实部分。考虑使用img作为背景图像。有一个很棒的CSS framework可以解决这个问题