全宽水平菜单中的垂直和水平居中文本

Question

我有一个带有许多链接的水平菜单，每个链接都需要有纯色背景色和每个链接之间的 1px 白色间隙。所以我使用表格/表格单元技术来强制每个LI 收缩/扩展，因为它们需要在一行中组合在一起。如果菜单有足够的项目或任何项目足够宽以至于任何LI > A 需要将其文本换行到下一行，则此方法可以正常工作。但是，如果所有LI > A 根据它们的内容/填充都是全宽的，它们拒绝扩展到LI 的宽度，因为我正在使用display:table-cell;vertical-align:middle 来强制每个A 中的垂直居中文本似乎 display:table-cell 不允许像width:100%

这是 CSS：

ul {
    display: table;
    padding: 0;
    width: 100%;
}

li {
    background:blue;
    border-right: 1px solid white;
    display: table-cell;
    vertical-align: bottom;
}

li:hover {
    background: red;
}

a {
    vertical-align: middle;
    height: 60px;
    display: table-cell;
    padding: 0 9px;
    color: white;
    text-align: center;
}

它正在行动中：http://jsfiddle.net/2GUpW/1/

我想我应该考虑另一种垂直居中的方法，这样我就可以避免A 上的display:table-cell，但是我不确定是否有合适的方法来实现这一点。我需要A 覆盖LI 的整个高度/宽度，否则LI 的某些部分不会被可点击链接覆盖。

感谢您的任何建议。

Answer 1

在 li 中定义高度而不是标签并垂直对齐。

使用这些更改：

    ul {
    display: table;
    padding: 0;
    width: 100%;
}

li {
    background:blue;
    border-right: 1px solid white;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    height: 60px;

}

li:hover {
    background: red;
}

a {

    padding: 0 9px;
    color: white;
    text-align: center;

}

demo