3

除了两个图像链接之外，我正在尝试将一些文本垂直居中。我之前已经这样做了几十次，但由于某种原因，它现在无法正常工作。

这是代码：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>​

如果我将图像取出，文本会完美对齐，但其中的图像不会对齐。

我究竟做错了什么？？

谢谢！

4

3 回答 3

3

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

http://jsfiddle.net/tU4x7/

在此示例中，图像位于内容的左侧，但如果将文本包装在跨度中，您也可以浮动文本。不过，还有其他解决方案可以实现相同的目标。

于 2012-09-29T02:09:03.820 回答
2 
img{
 vertical-align:middle;
}

使用这个 CSS。

演示

于 2012-09-29T02:11:55.347 回答
0 
img{vertical-align:middle;}

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

于 2012-09-29T02:17:27.603 回答