使用display：table的垂直对齐导航

Question

这就是我想要实现的目标：

Here's a fiddle显示了我的样式，（使用display: table，因为我不想修复每个项目的宽度，它应该响应）。

我很接近，这是造型（SASS为了简洁）以及它的外观：

.nav--main {
    ul {
        display: table;
        table-layout: fixed;
        width: 100%;
        border-collapse: collapse;
        li {
            display: table-cell;
            border: 1px solid #333;
            text-align: center;
            line-height: 1.2;
            vertical-align: top;
            overflow: hidden;
        }
    }
    a {
        display: inline-block;
        vertical-align: middle;
        width: 100%;
        height: 200%;
        padding: .5em;
        background-color: rgba(105,158,197,1);
        color: #fff;
        text-decoration: none;
    }
}

但我无法让a占据整个高度并保持在中间垂直居中。 This fiddle显示了一种hacky尝试，但只能将vertical-align设置为top。

我不想：

• 设定固定高度
• 将背景颜色放在li而不是a上：我讨厌可点击区域没有利用所有可用空间

Answer 1

我不知道，在这种情况下这可能会破坏，但有点肮脏的伎俩可能就是这样：

仅更新了CSS部分

ul {
    overflow: hidden;
}

a {
    margin: -5em 0;
    padding: 5.5em 0;
}

<强>演示

Try before buy

Answer 2

添加：

background: rgba(105,158,197,1);

进入ul

将背景颜色设置为与链接相同。