如何将跨度与文本和图像垂直对齐答案

【问题标题】：How to vertically align spans with text and image如何将跨度与文本和图像垂直对齐
【发布时间】：2012-05-23 19:52:49
【问题描述】：

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

<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 中运行 -> chrome

非常感谢您的帮助！

【问题讨论】：

你试过并设置 vertical-align:middle; ?

标签： html css vertical-alignment

【解决方案1】：

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

编辑

每个 cmets，此解决方案还需要 display:inline-block;。

【讨论】：

几乎！使用vertical-align:middle，text24与顶部对齐，而不是图像的中间
用另一个 span 包裹两个文本 span 并在此和 #icon 上使用 vertical-align: middle
@slash197：它与 vertical-align: middle 和 display:inline-block; 的新包装器一起工作，纯属天才！非常感谢您的帮助！

【解决方案2】：

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

【讨论】：

这也是我的想法，但是有了一个表格，我将来会失去重新设计页面的灵活性 - 说 - 将 text12 放在 text24 下面...

【解决方案3】：

最终结果

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;
    }

【讨论】：

感谢您的帮助，但 text24 与顶部对齐，而不是图像中间。看起来 Slash197 想出了一个很好的解决方案。对不起！

【解决方案4】：

这是有效的

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

【讨论】：