css - 使用显示的垂直对齐导航：表格

Question

这是我想要实现的目标：

这是一个显示我拥有的样式的小提琴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占据整个高度并保持垂直居中在中间。这个小提琴显示了一种骇人听闻的尝试，但只能通过设置vertical-align为top.

我不想：

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

Answer 1

我不知道，在这种情况下这可能会中断，但一个有点肮脏的技巧可能是这样的：

仅更新 CSS 部分

ul {
    overflow: hidden;
}

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

演示

先试后买

Answer 2

添加这个：

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

进入ul

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