CSS: Vertical-Align text?

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?

-------------Problems Reply------------

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)

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

Generally you should not do this, you should let it as the font was conceived by its author.

But it 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 that just to illustrate how the position can be changed.

I think you have to use a image for the left arrow than &larr.
It IS possible to have the &larr in a separate span, have some specific padding to bring the arrow to the right position, or use a specific font that has the arrow at the center, but this will have side effects.

I suggest you use an image.

There are two possible answers to this.

  1. The way you're writing it, this is not a graphical element (arrow) followed by a label ("Back"), but a line of text (inside a paragraph) containing a single character followed by a letter string. So alignment is a purely typographical problem and determined by the font you're choosing. Choose a different font and see if it's more typographically pleasing.
  2. What you want is really not a line of text but two independently placeable graphical elements. Put each inside its own span, give it display: inline-block and position: relative and play with vertical paddings, margins and line-heights until you're satisfied.

You have some options: 1. Put the arrow between span tags before the word Back, add an id to this span object and then assign the style in the css file playing with: padding-top or bottom and also vertical-align or position relative. 2. The second option is using the image as background and then you have to create the style for this link:

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

In addition, it is not common (from the semantic point of view) to put just the link (tag a) inside a paragraph (tag p). Then you have to deal with the default css rules for tag a and p but of course depends of your design

You could use CSS generated content. This will mean editing your HTML - to remove the arrow. Essentially you're creating a pseudo-element that sits in front of the link, and you can style it however you like, e.g.

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

On the downside this won't work in IE 6 or 7. You might be able to work around that with some targeted javascript.

If you don't want to edit your HTML, you could give :first-letter a try. It only works on block-level elements, so you'll need to work accordingly, e.g.

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

I've had trouble getting this to display consistently cross-browser though. IE8 and FF3.6 do rather different things with the code.

Category:html Views:0 Time:2010-10-12
Tags: html css

Related post

  • CSS Vertically Align Text in Header 2011-08-16

    I am trying to vertically align text in my header, and am having some trouble. Attached is an image of my starting point: The header has a set height of 141px and everything in that header should be right in the middle. Even the "Name of Website Here

  • CSS vertical alignment text inside li 2011-12-17

    I am displaying number of boxes in a row with fix height and width, generated from <li> tags. now I need to align the text in the vertical center. The CSS vertical-align has no impact, maybe I am missing something??? I am not looking for tricks

  • CSS Vertical align text to the middle of image 2012-02-19

    Possible Duplicate: How do I vertically align text next to an image with CSS? I have difficulties to center spans vertically middle in div. This simple code: http://jsfiddle.net/4hDTb/ HTML: <div class="bar"> <span>Simple text</span

  • CSS - vertical align text where text can be multiple lines 2010-05-04

    I've been given a design by a graphic designer, which I'm trying to put into HTML and CSS. One of the issues I'm facing is on a user input form. In the design the labels for each input are a fixed width - say 100px. The container for each label/input

  • CSS vertically align LI's in middle 2010-03-04

    I have the following HTML where I need the LI elements to vertically display in the middle of the 21 pixel high UL area. Here is my HTML... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd

  • CSS vertical-align: middle not working on nav bar with text to the left and login link to the right 2012-01-06

    I have a page with a header, followed by a (menu/tool) bar underneath, which is supposed to carry two elements: a text to the left (big font) and a login link (smaller text). The right hand link is supposed the be centered vertically. The following r

  • Client Report Definition (.rdlc) Textbox vertical align text 2009-10-27

    I'm using Visual Studio 2008 and have created a Client Report Definition (.rdlc). In this report I add a single Textbox and double it's height. When I change the TextAlign to "Center" it correctly centers the text, but when I set the VerticalAlign to

  • Vertically Align text in a Div 2010-05-30

    I am trying to find the most effective way to align text with a div. I have tried a few things and none seem to work. .testimonialText { position: absolute; left: 15px; top: 15px; width: 150px; height: 309px; vertical-align: middle; text-align: cente

  • How to vertically align text to middle in HTML select? 2010-11-25

    I didn't find any explanation on the internet on how to vertical-align text in an HTML select. I don't want to align the text in the <option></option> because that is not hard. I want to align the text that is selected in the <select

  • Vertical align text in block element 2011-03-02

    I know vertical alignment is always asked about, but I don't seem to be able to find a solution for this particular example. I'd like the text centered within the element, not the element centered itself: HTML: <ul> <li><a href="">I

  • Vertically align text bottom - absolute position, without knowing width 2011-04-26

    I'm getting stumped here... I'm trying to vertically align text in a top nav that has two different lines on each li. Normally, I would take the position:relative + position:absolute route, however, that only works if you set the width of the element

  • Vertically align text within div element 2011-07-13

    I know this question has been asked to death but nothing through searching has worked for me. You know the deal, I have a div element that I need to vertically align text in but nothing has worked (position:absolute;top:50%;margin-top:-x;display:tabl

  • CSS vertical-align: baseline with tables, forms and divs 2011-10-23

    I'm trying to build a form that contains inputs, textareas and block elements, each with a label. In order to get a flexible grid, I'm using a table. For a matching vertical alignment of the labels and the inputs/textarea I set vertical-align: baseli

  • CSS vertical alignment within inline-block 2012-01-23

    I'm trying to style some buttons with CSS and my button container is an inline-block with the text vertically centred within the block using line-height. The problem is when I add an icon to the button using another inline-block it seems to adjust th

  • Is it possible to vertically align text within a div? 2012-02-12

    This question already has an answer here: Vertically Align text in a Div 17 answers The code below (also available as a demo on JS Fiddle) does not position the text in the middle, as I ideally would like it to. I cannot find any way to vertically ce

  • Is this the simplest and most flexible solution to vertically aligning text within a block element? 2012-03-11

    I could be the first person to discover this (or at least document it on the web): HTML: <div>Vertically Aligned Text<span></span></div> CSS: div { height: 100px; /* or whatever % etc. */ } div > span { display: inline-bloc

  • DL Tag - Vertical align text in DT Tag, color background and have same height as DD Tag 2013-01-29

    Given the following html & CSS: <html> <style> dl.table-display { float: left; width: 520px; margin: 1em 0; padding: 0; border-bottom: 1px solid #999; } .table-display dt { clear: left; float: left; width: 200px; margin: 0; padding: 5

  • Vertical Align text in a Label 2009-10-12

    I have been asked to vertically align the text in the labels for the fields a form but I don't understand why they are not moving. I have tried putting in-line styles using vertical-align:top; and other attributes like bottom and middle but it don't

  • Vertical Aligned Text and Image in list 2010-04-26

    Is there a way of vertical aligning text and an image in a list? e.g. <li>Some text here <img src="image.jpg" alt="" /></li> The text doesn't align in the middle of the side of the image, it appears at the bottom then the image is n

Copyright (C) dskims.com, All Rights Reserved.

processed in 0.076 (s). 11 q(s)