How to vertically align spans with text and image

Question

I have now been looking for hours (obviously not in the right place!)

Please consider this sample: 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);
}​

​

What I'm trying to achieve is this:

• Center vertically the text24 (relative to the image)
• Align the bottom of text12 with bottom of text24
• Make sure the whole thing work in IE6 -> chrome

Many thanks for your help!

Answer 1

Add vertical-align: middle to your image.

EDIT

Per comments, this solution also requires display:inline-block;.

Answer 2

This is working

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

Answer 3

Final result

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

I know most of designers hate use table for layout, but let me try anyway. You can use valign of table.