卧式 <ul> 导航-如何垂直对齐内容 <li>

Question

I have a horizontal <ul> styled with CSS. Works nice, rolloevers everything, however, the list has a height of 50px and I need to position the in the links in the vertical middle. For some reason, I can't figure out how to do that...

The relevant code is here: http://jsfiddle.net/XPFMB/

How to make the "ssss" links go to the middle of the grey bar?

Answer 1

Add line-height: 50px; to your CSS for .nav ul li a

Answer 2

Add line-height to the li 's CSS:

.nav li {
    margin: 0px;
    float: left;
    line-height: 50px;
}

JS Fiddle demo .

This will cause problems if your text is long enough to run to a second line, though; however to account for that you could use min-width (instead of width ) on the a elements, and then add white-space: nowrap to both the ul and the li :

.nav ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    vertical-align: middle;
    white-space: nowrap;
}
.nav li {
    margin: 0px;
    float: left;
    line-height: 50px;
    white-space: nowrap;
}

JS Fiddle demo .

It's still not perfect; but it does reduce the likelihood of the layout breaking by using link-text a few characters too long.