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

Question

创建div-size链接非常容易（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