html – 如何垂直对齐文本和图像

前端之家收集整理的这篇文章主要介绍了html – 如何垂直对齐文本和图像前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我现在一直在寻找几个小时(显​​然不是在正确的地方!)

请考虑此示例:http://jsfiddle.net/DYLs4/9/

<div id="wrapper">
    <span id="text24">Text 24</span>
    <span id="text12">Text 12</span>
    <span id="icon"></span>
</div>

CSS:

#text24{
    font-size:24px; color:#999;   
}
#text12{
    font-size:12px; color:#000;  
}
#icon{
    height:36px; width:36px;
    display:inline-block;
    background:url(some-icon.png);
}​

我想要实现的是:

>垂直居中于文本24(相对于图像)
>将text12的底部与text24的底部对齐
>确保整个过程在IE6中有效 – >铬

非常感谢您的帮助!

解决方法

在图像中添加vertical-align:middle.

编辑

根据评论,此解决方案还需要显示:inline-block;.

猜你在找的HTML相关文章