Centrar una imagen dentro de un elemento de anclaje

Question

tengo un elemento de anclaje que tiene este aspecto

<a href="url"><img src="imgurl"/>Text</a> 

Me gustaría que la imagen y el texto del elemento de anclaje para alinear verticalmente. Intenté agregar vertical-align (css), relleno, márgenes, ets, pero la imagen no se alineará verticalmente con el texto.

Answer 1

alinear vertical en realidad sólo se aplica a los hermanos elementos. Esto debería funcionar:

<a href="url"><img scr="imgurl"/><span>Text</span></a> 

Con CSS:

a img, a span { vertical-align: middle; } 

Answer 2

¿Qué significa "alineación vertical"? ¿Deberían estar uno al lado del otro o encima? En caso de estar uno junto al otro, ¿el texto debe estar alineado con la parte superior, central o inferior de la imagen?

Si su problema es que se muestran en la parte superior de uno al otro en lugar de al lado, agregue el siguiente CSS:

a img { display: inline; } 

Si su problema es el contrario, añadir lo siguiente:

a img { display: block; clear: both; } 

y ver si eso ayuda.

Answer 3

la forma correcta de alinear las imágenes e iconos con el ancla Etiquetas es

En el CSS

a { 
    background: transparent url(/images/your_image) scroll no-repeat left center; 
    padding: 2px 0px 2px 20px; //fit as you need 
} 

En su HTML

<a href="url">Text</a>