使<a>标签填充显示<li>：表格单元格

Question

我想让锚标签填充列表元素，保持文本垂直和中心对齐，但显示：table-cell 在锚点的顶部和底部创建一个填充，列表中的填充：0 不起作用，锚点上的显示：块和高度：100% 有效，但文本被拉到顶部。

这是 JSFiddle

.header-menu {
padding: 0;
background: #fff;
}
.navbar .navbar-nav {
width: 100%;
display: table;
}
.navbar .navbar-nav .nav-item {
display: table-cell;
height: 70px;
vertical-align: middle;
border: 1px solid #000;
}
.navbar .navbar-nav .nav-link {
padding: 0;
color: #E90020;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
text-align: center;
background: grey;
}
.todas-as-categorias-span {
display: block;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar header-menu">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Item 1
<span class="todas-as-categorias-span">Categorias</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 5</a>
</li>
</ul>
</nav>

Answer 1

如果你想让灰色背景完全填满<li>的emelents，你必须在你的<a>元素上放height: 100%;你看到的白色不是填充，而是元素没有填充它们的容器。

现在，正如您自己写的那样，这将导致您的文本与顶部对齐。但除非你需要支持超旧的浏览器，否则你可以简单地使用flexbox来做居中。所以你只需要在CSS中增加5行：

.navbar .navbar-nav .nav-link {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
/* the rest of your original rules */
padding: 0;
color: #E90020;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
text-align: center;
background: grey;
}

更新的 JSFiddle

Answer 2

链接不知道扩展其高度以填充您添加到 LI 元素的 70px 高度。

尝试：

.navbar .navbar-nav .nav-link {
padding: 0;
color: #E90020;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
text-align: center;
background: grey;
height: 100%;
}