Centering an image within an anchor element

Question

I have an anchor element that looks like this

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

I'd like the image and the text of the anchor element to vertically align. I've tried adding vertical-align (css), padding, margins, ets, but the image will not vertically align with the text. Should be simple, I just can't figure it out. Any ideas? Thanks

Answer 1

How do you mean "vertically align"? Should they be next to each other, or on top of? In case of next to each other, should the text be aligned with the top, center or bottom of the image?

If your problem is that they are displayed on top of each other instead of next to, add the following to your css:

a img { display: inline; }

If your problem is the opposite, add this:

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

and see if that helps.

Answer 2

Vertical align only really applies to sibling elements. This should work:

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

With CSS:

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