Vertically Aligning Text In Navbar

Question

I am trying to use <span> to move some text in my navbar. My navbar is a <ul> and the elements are all <li>s but the text is aligned to the top of the navbar and I want it to be vertically centered. As you can see in the JSFiddle, I am using an a:hover property in CSS to change the background and color of the text when it's hovered over. When I apply the span to just the text, the whole hovering section gets moved too. See if you can understand what I mean.

My JSFiddle is here:

http://jsfiddle.net/G8CJ7/

Basically I just want the text vertically aligned in a simple, concise way. Originally I was using '' tags and setting a margin on them but I want to avoid using header tags for this purpose for improved SEO. Thanks.

Answer 1

http://jsfiddle.net/G8CJ7/1/

Added line-height:40px to center the text vertically. IE7 will have issues with this as it is not fully supported, so a conditional stylesheet with a padding-top on the li will solve it.

Answer 2

Adding line height works, you could also adding padding to the top:

.class { padding-top: 10px; }

Adjust the padding to center.