如何垂直對齊跨度的文字和圖像

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確定 - >鉻

非常感謝您的幫助！

Answer 1

將vertical-align: middle添加到您的圖片。

EDIT

每評論，這種解決方案還需要顯示：內聯塊;。

Answer 2

我知道大多數設計師討厭使用表格進行佈局，但是讓我試試。 您可以使用表格的valign。

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

Answer 4

這是工作

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