垂直居中联内容使用的line-height [英] Vertically Centering Inline Content Using line-height

问题描述

我想垂直居中一些文字，除了两个图像的链接。我以前做过数十次，但由于某种原因，它是不工作的权利了。

这里的code： http://jsfiddle.net/KRWNw/

 ＆LT;风格类型=文本/ CSS＆GT;
＃社会图标{
    高度：32PX;
    的line-height：32PX;
}
＆LT; /风格＆GT;

＆LT; D​​IV ID =社会图标＆GT;
    连接：
    ＆所述; A HREF =＃＆GT;
        ＆LT; IMG SRC =htt​​p://mydomain.com/rodi/images/facebook.pngWIDTH =32高度=32/＆GT;
    ＆所述; / a取代;
    ＆所述; A HREF =＃＆GT;
        ＆LT; IMG SRC =htt​​p://mydomain.com/rodi/images/youtube.pngWIDTH =32高度=32/＆GT;
    ＆所述; / a取代;
 ＆LT; / DIV＆GT;
 

如果我所拍摄的图像出来的文字完全对齐，但在它的图像将不会调整。

我在做什么错了？

感谢您！

解决方案

  IMG {
 垂直对齐：中间;
}
 

使用这个CSS。

演示

I'm trying to vertically center some text besides two image links. I've done this dozens of times before but for some reason it isn't working right now.

Here's the code: 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>​

If I take the images out the text aligns perfectly, but with the images in it won't align.

What am I doing wrong??

Thank you!

解决方案

img{
 vertical-align:middle;
}

use this css.

DEMO

这篇关于垂直居中联内容使用的line-height的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！