HTML-CSS中心在链接中水平和垂直文本

我正在尝试制作一个高度和宽度为200px的链接。
链接的文本应垂直和水平居中。

到目前为止这是我的CSS：

a:link.Kachel {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  display: block;
  text-align: center;
  background: #383838;
  display: -webkit-Box;
  display: -moz-Box;
  display: Box;
  -webkit-Box-align: center;
  -moz-Box-align: center;
  Box-align: center;
}

这个HTML代码：

<tr>
  <td>
    <a class="Kachel" href="#">Test</a>
  </td>
</tr>

文本水平居中但不垂直。

知道如何让文本水平和美观地集中在一起吗？

解决方法

删除所有其他废话，只需用行高替换高度

a:link.Kachel{
   width: 200px;
   line-height: 200px;
   display: block;
   text-align: center;
   background: #383838;
}

jsfiddle：http://jsfiddle.net/6jSFY/

原文地址：https://www.jb51.cc/html/232552.html