CSS: Vertical-Align text?

Question

I am using the following HTML:

<p><a href="http://www.example.com/">&larr; Back</a></p>

To create the following:

← Back

Problem is, the left arrow is not vertically aligned in the middle. It appears to be at the lower 3rd.

Question: how do I get the left arrow to be aligned vertically in the middle (of the letter "B") using CSS?

---

UPDATE:

Is it possible for me to vertically adjust/align this:

1. Without modifying my HTML, and
2. Without using an image?

Answer 1

The arrow is a simple character, so it's aligned like the others (it is in the "middle", the creator of the font wants it to be where it is... maybe that's the middle of lower-case character). Maybe it looks different using another font, maybe not. If you have a fixed font and that one looks messy, you could try to use the :first-letter selector (or wrap the arrow in a span or something) to move it up 1 or 2 px (position:relative: top:-2px;).

Another solution would be to use an image for this, like most websites do (and there are many free icon sets out there — my favourite is famfamfam)

Answer 2

You can wrap your arrow in SPAN tag and then play with line-height and vertical-align CSS properties.