verticalmente centro text-align

Ok, esto es lo que estos elementos HTML parece que en este momento:verticalmente centro text-align

enter image description here

Me gustaría que el texto que se centra en la imagen. La imagen es 32x32px.

Aquí está mi código:

<style> 
div.interface { 
    line-height: 32px; 
    float: left; 
    margin: 10px; 
    width: 450px; 
    font: 14px/27px 'CalibriRegular', Arial, sans-serif; 
    color: #646464; text-shadow: 1px 1px 1px #fff; 
    padding-right: 10px; 
} 
</style> 

<div class="interface"><img src="assets/icons/interface.png" />Filled with fun animations and eye-candy! Complete with Retina graphics.</div>

Fuente

2011-02-10 sudo rm -rf

cheque esta pregunta fuera: http : //stackoverflow.com/questions/4414034/how-to-vertically-align-elements-in-html/4414069#4414069 – JCOC611

@JCOC: Parece justo lo que estaba necesitando. Perdón, no busqué lo suficiente. También podría duplicar su respuesta aquí para que pueda aceptar una respuesta. :) –

Nah, está bien! Copié mi respuesta y la edité un poquito para que se adapte mejor a tu situación. – JCOC611

Para centrar el texto ajustado verticalmente la línea de altura al igual que la altura, por ejemplo:

img{ height: 30px; } 
#text{ line-height: 30px; }

Y establecer vertical de la alineación a media:

#text{ line-height: 30px; vertical-align:middle; }

Fuente

2011-02-10 03:10:00 JCOC611

Gracias a los dos. Aceptaré la respuesta de JCOC porque primero me dio la respuesta correcta. Viene tan pronto como esté disponible. ¡Gracias! –

que debería ser 'vertical-align: middle;' – stephenmurdoch

y ¿qué es? jk lo edité. – JCOC611

Añadir style="vertical-align: middle" a su etiqueta <img />.

Consulte http://phrogz.net/CSS/vertical-align/index.html para una explicación completa sobre la etiqueta vertical-align.

Fuente

2011-02-10 03:07:54 LucasTizma

Gracias por su respuesta! :) –

Esta es la mejor respuesta. –

verticalmente centro text-align

Respuesta

Cuestiones relacionadas