Cómo centrar verticalmente imágenes en una línea?

¿Cuál es la mejor manera de centrar íconos en una línea cuando las imágenes son más pequeñas que la altura de la línea?Cómo centrar verticalmente imágenes en una línea?

Por ejemplo (estilos en línea para facilitar la lectura):

<div style="line-height: 20px"> 
    <img style="width: 12px; height: 12px;"/> 
    Blah blah blah 
</div>

Here's a jsFiddle example. Este ejemplo también muestra por qué vertical-align: middle no funciona.

Quiero que el img se centre en el texto del div. Es decir, incluso si el texto se envuelve en varias líneas, la imagen se centraría en una sola línea. Idealmente, la solución no implicaría establecer marcas/acolchados en la imagen y funcionaría incluso si no supiera la altura de la línea.

cosas que he leído:

How do I vertically align text next to an image with CSS? (ofertas con el caso donde la imagen es más grande, no parece aplicarse aquí)

Understanding vertical-align

Fuente

2010-06-15 Jeremy Kauffman

¿Qué problema hay con la solución especificada en los enlaces a los que se refiere? Usar '' debería funcionar igual de bien cuando la imagen es más pequeña que la altura de la línea. –

Me puede estar faltando algo aquí, pero lo que tiene parece alinearse verticalmente como es: 'http: // jsfiddle.net/JrFkE /' – edl

Agregué un violín que muestra los problemas con ambos enfoques. –

La causa de su problema es que la imagen se centra verticalmente en relación con el x-height del texto circundante. Esto se puede ver muy claramente en una pantalla ampliada, donde se incluye la baseline y mean line del texto adyacente:

illustration of a vertically aligned image compared to the surrounding text's baseline and mean line

La imagen se alinea de manera similar sin importar el tamaño de la fuente o la altura de la línea que utilizan. Por lo tanto, en un sentido tipográfico, la imagen está correctamente alineada verticalmente. Sin embargo, si desea ajustar la alineación de modo que el centro de la imagen está más cerca de la línea media, basta con mover un poco hacia arriba usando margin-bottom:

img.icon { 
    margin-bottom: 0.25em; 
}

El valor de 0.25 em es más bien escogidos arbitrariamente , basado en lo que se veía bien cuando lo probé. Ajuste libremente según el gusto.

Aquí está a comparison before and after the margin-adjustment, con diferentes tamaños de letra.

Fuente

2010-06-15 20:10:51

+1 Siempre he estado atascado en este problema (imágenes en línea con texto). Esa es una solución real. Gracias @Wieslander – shashwat

suplementario: img debe alinearse verticalmente: abajo, y abajo-abajo: (altura de línea - altura de la imagen)/2 – linjunhalida

¿Por qué no establecer la imagen como fondo del elemento div? Es decir .:

<div style="line-height: 20px; background: url(path/image.gif) 5px 5px; no-repeat; padding-left: 40px;"> 
    Blah blah blah 
</div>

Esto colocará la imagen en la esquina superior izquierda. Al menos así es como lo haría.

Saludos

Fuente

2010-06-15 18:53:36

No es una mala idea, pero en este caso las imágenes son realmente sprites (por ejemplo, algo así como ) en lugar de etiquetas img, por lo que no funcionará. –

@jeremy: ¿Entonces por qué usas una etiqueta 'img' en tu pregunta? – jeroen

Simplificación.Esta solución también requiere establecer manualmente las distancias, lo que esperaba evitar. Si cambio el tamaño del texto o la altura de la línea, necesito reajustar la posición de la imagen. –

tratar de hacer que los padres contenedor display: table y display: table-cell. Después de eso, vertical-align: middle debería funcionar en "forma de tabla".

Fuente

2010-06-15 19:19:30 vtambourine

Esto no funciona en IE7 y versiones anteriores, que desafortunadamente aún existen. –

Cómo centrar verticalmente imágenes en una línea?

Respuesta

Cuestiones relacionadas