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.

Solution 1

Updating this a couple years later but there's always the option of using:

display:table;
display:table-row;
display:table-cell;

with vertical-align:middle; in order to center the items. I prefer this approach these days because you can apply responsive rules to the display style (for example, change it to display:block and display:inline-block etc. if you need to update it for other screen sizes. Here is a fiddle:

http://jsfiddle.net/G8CJ7/68/

Solution 2

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.

Solution 3

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

.class { padding-top: 10px; }

Adjust the padding to center.