显示：table-cell with text-align: center

Question

我正在研究一种滑入式全屏导航类型的设置，一切都运行良好（尽管我对改进概念的想法持开放态度！）。我的问题是将垂直对齐 div 中的文本居中对齐。我尝试了通常的 text-align: center on each of the ul, li, a and a div 在提供的笔中，但没有任何问题。

我尝试使用以下方法在 li 中添加一个 div，但它没有按预期工作：

ul li a {
  display: table;
  height: 25vh;
}

ul li a div {
  display: table-cell;   
  vertical-align: middle;
}

有什么想法吗？

代码笔：http://codepen.io/robotsmeller/pen/OWOxor

Answer 1

你只需要添加

ul li a {
  line-height: 25vh;
  margin: 0 auto;
}

查看更新的代码笔 http://codepen.io/anon/pen/qRxQrm

希望对您有所帮助

Answer 2

使用这个

ul li div a {
  margin: 0 auto;
}