कैसे खड़ी पाठ और छवि

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> 

सीएसएस:

#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 (छवि के सापेक्ष)
• text24
• के नीचे के साथ text12 के नीचे संरेखित IE6 में यकीन है कि पूरी बात काम करें: ४६५१०४०३२१० यह क्या मैं प्राप्त करने के लिए कोशिश कर रहा हूँ है -> क्रोम

आपकी मदद के लिए बहुत धन्यवाद!

Answer 1

अपनी छवि में vertical-align: middle जोड़ें।

संपादित

टिप्पणियों के अनुसार, इस समाधान भी प्रदर्शन की आवश्यकता है: इनलाइन-ब्लॉक;।

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/