Question

I’m getting some problems with vertical aligment.
I want to put my <span>›</span> element centralized in vertical.
http://jsfiddle.net/vpVEf/

Is there a way to centralize it automatically as the “li a” in this example? Note that the a element is centralized without using line-height.
http://jsfiddle.net/vpVEf/9/

Answer 1

The reason this is happening is because the a tag has a padding, pushing down everything in it by 12px.

Remove the top/bottom padding and use line-height to make it 68px tall.

padding: 0 12px;
line-height: 68px;

It might not look like it, but this does fix the problem. Remove all formatting from the span to see! But now the issue is that the text isn’t aligned center within the span. You can use line-height on the span to adjust that as well.

line-height: 55px;

Seems to work well.

DEMO