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

Question

我有一个水平的<ul> CSS 样式。效果很好，一切都翻转，但是，列表的高度为 50px，我需要将其放置在垂直中间的链接中。由于某种原因，我无法弄清楚如何做到这一点......

相关代码在这里：http://jsfiddle.net/XPFMB/

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

Answer 1

将line-height: 50px; 添加到您的CSS 中以获取.nav ul li a

Answer 2

在li 的 CSS 中添加 line-height：

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

JS Fiddle demo.

如果你的文本足够长到第二行，这会引起问题；但是考虑到这一点，您可以在a 元素上使用min-width（而不是width），然后将white-space: nowrap 添加到ul 和 em> 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.

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