Centrowanie obrazu w obrębie elementu zakotwiczenia

Question

Mam element zaczepienia, który wygląda tak

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

Chciałbym obraz i tekst elementu kotwy pionowo wyrównać. Próbowałem dodać pionowe wyrównanie (css), dopełnienie, marginesy, ets, ale obraz nie będzie wyrównany w pionie z tekstem.

Answer 1

Wyrównanie pionowe dotyczy tylko elementów rodzeństwa. To powinno działać:

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

z CSS:

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

Answer 2

Jak masz na myśli "wyrównanie w pionie"? Czy powinni być obok siebie, czy na górze? W przypadku, gdy obok siebie, czy tekst powinien być wyrównany do górnej, środkowej lub dolnej części obrazu?

Jeśli problem jest to, że są one wyświetlane na górze każdego innego zamiast obok, należy dodać następujące wpisy do CSS:

a img { display: inline; } 

Jeśli problem jest przeciwieństwem, dodać to:

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

i sprawdź, czy to pomaga.

Answer 3

Prawidłowy sposób Dopasuj obrazy i ikony z Anchor Tagi jest

W swojej css

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

w HTML

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