centratura un'immagine all'interno di un elemento di ancoraggio

Question

Ho un elemento di ancoraggio che assomiglia a questo

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

Vorrei l'immagine e il testo dell'elemento di ancoraggio per allineare verticalmente. Ho provato ad aggiungere vertical-align (css), padding, margini, ets, ma l'immagine non si allinea verticalmente con il testo.

Answer 1

L'allineamento verticale si applica solo agli elementi di pari livello. Questo dovrebbe funzionare:

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

Con i CSS:

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

Answer 2

Come intendete "allineare verticalmente"? Dovrebbero essere uno accanto all'altro o sopra? In caso di uno accanto all'altro, il testo deve essere allineato con la parte superiore, centrale o inferiore dell'immagine?

Se il vostro problema è che sono visualizzati su uno sopra l'altro, invece di accanto, aggiungere quanto segue al css:

a img { display: inline; } 

Se il problema è l'opposto, aggiungere questo:

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

e vedere se questo aiuta.

Answer 3

il modo corretto di allineare le immagini e le icone con Anchor Tag è

nel CSS

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

nel codice HTML

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