css - 如何用链接填充div内的整个空间并将链接文本垂直居中？

Question

创建 div 大小的链接非常容易 ( https://stackoverflow.com/a/16555663/982646 )，就像在 div 中将文本垂直居中 ( https://stackoverflow.com/a/12686489/982646 )。

但是如何将这两者结合起来呢？

如果我将链接宽度和高度设置为 100%，它就不再居中了。

Answer 1

您可以将您的父 div 设置为 inline-block，这样链接的大小将与其相同。

要使链接垂直居中，您可以将容器的line-height设置为与链接的高度相同。

.container {
  line-height: 3em;
  display: inline-block;
}

.link {
  height: 3em;
}

垂直居中还有其他方法，但我们需要更多信息才能给出更合适的解决方案。

以下是我所解释内容的示例:http://codepen.io/JKudla/pen/xqaLvy