Css 使用“显示：表格”进行垂直对齐导航

以下是我努力实现的目标：

显示我拥有的样式（利用

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/COD>占据整个高度并保持垂直居中。显示了一种黑客尝试，但仅通过将

vertical align

设置为

top

我不想：

• 定高度
• 将背景色放在

  li

  而不是

  a

  上：我讨厌可点击区域没有利用所有可用空间
添加以下内容：

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

进入

ul

---

这将背景颜色设置为与链接相同的颜色。
我不知道，在这种情况下，这可能会中断，但有点脏的技巧可能是：
仅更新CSS部分

ul {
    overflow: hidden;
}

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

演示

---

这并不能解决问题，因为OP希望链接填满整个表格单元格。@InsertUserName在这里，我认为根据他的要求，不改变链接的高度或宽度是不可能的。干杯-这看起来确实很有效（在Chrome、FF和IE 8-10中）。我想看看是否有人能想出一个不那么“肮脏”的解决方案！这也使得它很难在链接上添加渐变背景，因为大部分内容实际上是隐藏的。例如：“在CSS 2.1中，单元格框的高度是内容所需的最小高度。表格单元格的‘高度’属性可以影响行的高度（见上文），但不会增加单元格框的高度。”。