CSS before content vertical align

Question

I'm in need of help. I've search the web for the answer but the answer i found didn't work.

I'm trying to display the content of the a in a box above the a "a:before", and then display the same text as in the a, and i've done that with

content:attr(title);

But it wont vertical align. i've tried with

display:table-cell;
vertical-align:center;

http://jsfiddle.net/CvZkX/

It dosn't work. Anybody knows how it's done?

Best Regards Mats

Answer 1

For a single line of text, the easiest solution is to use line-height .

http://jsfiddle.net/thirtydot/CvZkX/1/

header nav a:before {
    line-height: 2.3em;
}

I chose 2.3em because you have .5em + .5em + 1.7em ( padding-top + padding-bottom + font-size ), and we're trying to set the line-height equal to the height of the element.