Cómo alinear verticalmente vanos con el texto y la imagen

Question

Ahora he estado buscando durante horas

Por favor, considere esta muestra (obviamente no en el lugar correcto!): 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); 
}​ 

Lo que estoy tratando de lograr es la siguiente:

• Centro verticalmente el text24 (en relación a la imagen)
• alinear la parte inferior de text12 con la parte inferior de text24
• Asegúrese de que el conjunto funcione en IE6 -> cromo

Muchas gracias por su ayuda!

Answer 1

Agregue vertical-align: middle a su imagen.

EDITAR

por los comentarios, esta solución también requiere display: inline-block;.

Answer 2

Sé que la mayoría de los diseñadores odian utilizar la tabla para el diseño, pero déjame intentarlo de todos modos. Puede usar valign de la tabla.

Answer 3

resultado final

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

esto está funcionando

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