垂直对齐的多行文本在响应式水平导航中

Question

尝试在响应式水平列表中尝试垂直对齐多行文本（链接）。我的导航的高度已固定。

我的标记重组就是这样。您可以看到所有链接甚至都有分布式的宽度，如果容器变小，第三个链接项目将在多行上运行，我仍然可以将其垂直对齐？

.list {
  font-family: arial;
  background: white;
  margin: 0;
  padding: 0;
  list-style: none;
  display: table;
  width: 100%;
  table-layout: fixed;
}
.list-item {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.list-item a {
  box-sizing: border-box;
  display: block;
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  background: blue;
  padding: 0 15px;
  line-height: 48px;
  min-height: 48px;
  max-height: 48px;
}
.list-item a:hover {
  background: red;
}

<ul class="list">
  <li class="list-item"><a href="">one</a></li>
  <li class="list-item"><a href="">two</a></li>
  <li class="list-item"><a href="">three three three</a></li>
  <li class="list-item"><a href="">four</a></li>
  <li class="list-item"><a href="">five</a></li>  
</ul>

Answer 1

您想拥有第三个链接在一行中的情况吗？您必须使用诸如白空间之类的东西：现在

.list-item {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    background: blue;
}
.list-item:hover {
    background: red;
}
.list-item a {
    box-sizing: border-box;
    display: block;
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    background: blue;
    padding: 0 15px;
    /* line-height: 48px; */
    /* min-height: 48px; */
    max-height: 48px;
    height: 100%;
}

Answer 2

这是一个几乎可以完成您想要的解决方案。仅缺点：实际链接区域（您可以单击）不会跨越列表元素的整个高度（但整个宽度）：

编辑：在评论后，将a:focus添加到最后一个规则选择器

.list {
  font-family: arial;
  background: white;
  margin: 0;
  padding: 0;
  list-style: none;
  display: table;
  table-layout: fixed;
  width: 100%;
}
.list-item {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  background: blue;
  height: 48px;
}
.list-item a {
  box-sizing: border-box;
  display: block;
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  padding: 0 15px;
  line-height: 14px;
  width: 100%;
}
.list-item:hover, a:focus {
  background: red;
}

<ul class="list">
  <li class="list-item"><a href="">one</a></li>
  <li class="list-item"><a href="">two</a></li>
  <li class="list-item"><a href="">three three three</a></li>
  <li class="list-item"><a href="">four</a></li>
  <li class="list-item"><a href="">five</a></li>
</ul>