2012-05-16 14 views
6

Ahora he estado buscando durante horasCómo alinear verticalmente vanos con el texto y la imagen

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

Result

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

Goal

Muchas gracias por su ayuda!

+0

hicieron intenta y ajuste vertical-align: media; ? – ShibinRagh

Respuesta

18

Agregue vertical-align: middle a su imagen.

EDITAR

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

+0

por imagen Quiero decir '# icon' – slash197

+0

¡Casi! Con vertical-alinear: medio, text24 está alineado con la parte superior, no el medio de la imagen – Johann

+0

sí, incluso 'align =" middle "' en la etiqueta funcionaría – gopi1410

0

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.

+0

Esto también ha estado en mi mente, pero con una tabla perderé flexibilidad en el futuro para reactivar la página y, por así decirlo, texto 12 debajo del texto24 ... – Johann

0

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

Gracias por su ayuda, pero el texto24 está alineado con la parte superior, no medio de la imagen. Parece que a Slash197 se le ocurrió una buena solución. ¡Lo siento! – Johann

Cuestiones relacionadas