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

2023-09-11 07:49:29 作者:染上思念的毒

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

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

 <风格类型=文本/ CSS>
#社会图标{
    高度:32PX;
    的line-height:32PX;
}
< /风格>

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

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

我在做什么错了?

感谢您!

解决方案

  IMG {
 垂直对齐:中间;
}
 
关于移动端文字无法垂直居中 或line height不起作用 的问题的解决方案

使用这个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