Vertical text alignment in Navbar

Question

I am trying to use <span> to move some text in my navigator. My navigation bar is <ul> , and all the <li> elements, but the text is aligned at the top of the navigation bar, and I want it to be vertically centered. As you can see in JSFiddle, I use the a: hover property in CSS to change the background and color of the text when it hangs. When I apply span to text only, the entire hovering section also moves around. See if you can understand what I mean.

My JSFiddle here:

http://jsfiddle.net/G8CJ7/

Basically, I just want the text to be aligned vertically in a simple, concise way. I originally used tags '' and set margins for them, but I want to avoid using header tags for this purpose to improve SEO. Thanks.

Answer 1

Update this a couple of years later, but there is always the opportunity to use:

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

with vertical alignment: medium; to center objects. 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 the fiddle :

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

Answer 2

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

Height line added: 40 pixels to center text vertically. IE7 will have problems with this, as it is not fully supported, so the conditional stylesheet with a top layer on li will solve it.

Answer 3

By adding line height, you can also add labels at the top:

 .class { padding-top: 10px; } 

Adjust the indentation to the center.