有关CSSCenter链接中的水平和垂直文本?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (55)

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

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

文本是水平居中的,但不是垂直的。

知道如何使文本以水平和垂直为中心吗?

提问于
用户回答回答于

去掉所有的废话,代之以height带着line-height

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

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

用户回答回答于

小点补充。如果删除下划线(text-decoration:none;),则文本将不会完全垂直居中。链接为下划线留出空间。据我所知,除了添加额外的顶部填充之外,没有办法覆盖它。

扫码关注云+社区

领取腾讯云代金券