如何垂直对齐文本和图像

Question

我现在一直在找几个小时（显​​然不是在正确的地方！）

请考虑此示例：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);
}​

我想要实现的目标是：

• 垂直居中于text24（相对于图像）
• 将text12的底部与text24
的底部对齐
• 确保整个过程在IE6中有效 - ＆gt;铬

非常感谢你的帮助！

Answer 1

将vertical-align: middle添加到您的图片中。

修改

根据评论，此解决方案还需要 display：inline-block; 。

Answer 2

这是有效的

http://jsfiddle.net/rizwanabbasi/frsA5/1/

Answer 3

我知道大多数设计师讨厌使用表格进行布局，但无论如何让我试试。 您可以使用表格的valign。

Answer 4

最终结果

http://jsfiddle.net/rizwanabbasi/frsA5/

<div id="wrapper">
    <span id="text24">Text 24</span>
    <span id="text12">Text 12</span>
    <img src="http://www.adlittle.com/fileadmin/templates/images/rss_feed_icon.png" id="icon"/>
</div>

#wrapper{
    position:absolute; left:0;
}
#text24{
    font-size:24px; color:#999; font-weight:bold;
}
#text12{
    font-size:12px; color:#000; font-weight:bold; }
#icon{
    height:36px; width:36px;
    display:inline;
    vertical-align:middle;
    }