How to vertically align gaps with text and image

Question

I'm looking for a watch now (obviously not in the right place!)

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

I am trying to achieve this:

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

Many thanks for your help!

Answer 1

Add vertical-align: middle to your image.

EDIT

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

Answer 2

It works

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

Answer 3

I know that most designers hate layout usage tables, but let me try anyway. You can use valign tables.

Answer 4

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