水平导航 - 如何垂直对齐的内容

Question

我有一个用 CSS 设计的水平

样式。效果很好，可以滚动所有内容，但是，列表的高度为 50px，我需要将其放置在垂直中间的链接中。由于某种原因，我不知道该怎么做...

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

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

Answer 1

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

Answer 2

将 line-height 添加到 li 的 CSS：

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

JS Fiddle demo。

不过，如果您的文本足够长到可以运行到第二行，这将导致问题；但是考虑到这一点，您可以在 a 元素上使用 min-width （而不是 width），并且然后将 white-space: nowrap 添加到 ul 和 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 演示。

它仍然不完美；但它确实减少了通过使用太长的链接文本来破坏布局的可能性。