CSS: Vertically Aligned Text?

Question

I am using the following HTML:

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

To create the following:

& larr; Back

The problem is that the left arrow is not vertically aligned in the middle. He seems to be on the bottom third.

Question : how to make the left arrow align vertically in the middle (the letter "B") using CSS?

---

UPDATE

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

• Without changing my HTML and
• Without using an image?

Answer 1

An arrow is a simple character, so it is aligned like the others (it is in the "middle", the font creator wants it to be where it is ... maybe the middle of the lowercase character), Maybe it looks different using a different the font may not. If you have a fixed font and this one looks messy, you can try using the : first-letter selector (or wrap the arrow in span or something else) to move it 1 or 2 px ( position:relative: top:-2px; ).

Another solution would be to use an image for this, as most websites do (and there are plenty of free icon sets - my favorite famfamfam )

Answer 2

You can wrap your arrow in the SPAN tag and then play using CSS properties with height and vertical alignment.

Answer 3

As a rule, you should not do this, you should allow it, since the font was conceived by its author.

But you want to change it, you can do it like this:

 <p><a href="http://www.example.com/"> <span style="position:relative;top:-3px;">&larr;</span> Back </a></p> 

Note. Use what you need, instead of -3px , I used this to illustrate how you can change the position.

Answer 4

I think you need to use the image for the left arrow than &larr .
It is possible to have &larr in a separate span , have a specific task to bring the arrow to the desired position, or use a special font with the arrow in the center, but this will have side effects.

I suggest you use an image.

Answer 5

There are two possible answers to this question.

• As you write it, this is not a graphic element (arrow) followed by a label ("Back"), but a line of text (inside a paragraph) containing one character, followed by a letter. Thus, alignment is a purely typographic problem and is determined by the font you choose. Choose a different font and see if it is more typographic.
• What you want is not really a line of text, but two independently placed graphic elements. Put each one in your own span , give it display: inline-block and position: relative and play with vertical spacers, margins and lines until you are satisfied.

Answer 6

You have several options: 1. Place the arrow between the span tags in front of the word Back, add an id to this span object, and then assign a style to the css file, playing with: padding-top or bottom , as well as vertical alignment or relative position . 2. The second option uses the image as a background, and then you should create a style for this link:

  li a#link,#link_conten{ background-image: url(../../../img/arrow.gif); background-position: left top; background-repeat: no-repeat; } 

Furthermore, it is not common (from a semantic point of view) to place only a link (tag a) inside a paragraph (tag p). Then you need to deal with the default CSS rules for the a and p tags, but of course it depends on your design.

Answer 7

You can use the generated CSS content. This will mean editing your HTML - to remove the arrow. Essentially, you create a pseudo-element that is in front of the link, and you can style it as you like, for example.

 a.back:before { content: "\2190 "; /* Unicode equivalent of ← */ display: inline-block; padding: 5px; background-color: aqua; } 

At the bottom, this will not work in IE 6 or 7. Perhaps you can get around this with some javascript target.

If you don't want to edit your HTML, you can try :first-letter try. It only works on block level elements, so you will need to work accordingly, for example.

 a.back { display: inline-block; } a.back:first-letter { background-color: aqua; padding: 5px; } 

I am having trouble with this to display a cross browser sequentially. IE8 and FF3.6 do quite different things with the code.