Question

我正试图将两个图像链接旁边的文本垂直居中。我以前做过几十次，但由于某种原因它现在不能正常工作。

<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

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

http://jsfiddle.net/tU4x7/

此示例中的内容保留了图像，但如果将其包装在跨度中，也可以浮动文本。还有其他解决方案可以达到同样的目的。

Answer 2

img{
 vertical-align:middle;
}

使用此css。

DEMO

Answer 3

img{vertical-align:middle;}

但我不会那样使用它，因为图标不是页面或内容的真实部分。考虑使用img作为背景图像。这个

有一个很棒的CSS framework

使用行高度垂直居中内联内容

3 个答案: