Centering An Image Within An Anchor Element

I have an anchor element that looks like this Text I would like the image and the text of the anchor element to vertically

Solution 1:

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

<ahref="url"><imgscr="imgurl"/><span>Text</span></a>

With CSS:

aimg, aspan { vertical-align: middle; }

Solution 2:

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:

aimg { display: inline; }

If your problem is the opposite, add this:

aimg { display: block; clear: both; }

and see if that helps.

Solution 3:

The Proper Way to Align Images and Icons with Anchor Tags is

In your css

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

In your HTML

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