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

Question

我正在尝试创建一个具有a height和width200px 的链接.链接的文本应垂直和水平居中.

到目前为止这是我的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>

文本水平居中但不垂直.

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

Answer 1

删除所有其他废话,只需替换height为line-height

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

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

Answer 2

在CSS3中,您可以使用flexbox实现此目的,而无需任何额外元素.

.link {
    display: flex;
    justify-content: center;
    align-items: center;
}

Answer 3

如果文本只在一行上,则可以使用line-height:200px;- 其中200px与height值相同.

如果文本在多行上并且将始终在相同数量的多行上,则可以使用padding组合line-height.2行示例:

line-height:20px;
padding-top:80px;

这样两条线将占据总共40px,并且填充顶部将它们完美地放在中间.请注意,您需要相应地进行调整height.

JSFiddle示例.

如果有多个链接并且它将包含任意数量的行,则需要一些附带的JavaScript来修复每个链接的填充.