水平<ul>导航 - 如何垂直对齐<li> </li> </ul>的内容

Question

我有一个水平<ul>样式的CSS。工作得很好，滚动一切，但是，列表的高度为50px，我需要在垂直中间的链接中定位。出于某种原因，我无法弄清楚如何做到这一点......

相关代码位于：http://jsfiddle.net/XPFMB/

如何让“ssss”链接到灰色条的中间？

Answer 1

将line-height: 50px;添加到.nav ul li a

的CSS中

Answer 2

将行高添加到li的CSS：

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

JS Fiddle demo

如果你的文字长到足以跑到第二行，这将引起问题;但是为了解释您可能在min-width元素上使用width（而不是a），然后将white-space: nowrap添加到ul {1}} 和 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

它仍然不完美;但它确实通过使用链接文本几个字符来减少布局中断的可能性。