css - 将li标签中的标签与动态高度垂直对齐

我有一个动态调整大小的div offers，然后在6个li标记内，每个标记的高度为16.6％，以填充div。每个li标记内都有一个a标记，但是我想垂直对齐a标记。我看过很多不同的解决方案，但似乎没有一个对我有用。我的代码示例是；

.offers {
  background-color: yellow;
  height: 200px;
}
.offers li {
  display: table-cell;
  float: left;
  vertical-align: middle;
  border: solid 1px;
  box-sizing: border-box;
  height: 16.6%;
  width: 100%
}
.offers li a {
  background-color: red;
}

<div class="offers">
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
<li><a href="#">Link5</a></li>
<li><a href="#">Link6</a></li>
</div>

这是一个代码笔-http://codepen.io/anon/pen/dXXJEY

最佳答案

如果要使用显示表单元，请用以下代码替换代码笔中的CSS，它应该可以工作：

.offers {
  background-color:yellow;
  height:200px;
  display: table;
  width: 100%;
}
.offers li {
  display:table-row;
}
.offers li a {
  background-color:red;
  display: table-cell;
  vertical-align:middle;
  border:solid 1px black;
}

关于css - 将li标签中的标签与动态高度垂直对齐，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37856324/