HTML-CSS中心链接中的水平和垂直文本 [英] HTML-CSS Center Text horizontally and vertically in a link

问题描述

我试图建立一个 height 和一个宽度为200像素的链接。
链接文本应垂直和水平居中。

I am trying to make a link which has a height and a width of 200px. The text of the link shall be centered vertically and horizontally.

这是我的CSS到目前为止：

This is my CSS so far:

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>

文本水平居中但不垂直。

The text is horizontally centered but not vertically.

任何想法如何让文字在水平方向和虚拟方向上居中？

Any idea how to get the text centered both horizontally and virtically?

推荐答案

删除所有其他废话， height with line-height

remove all that other nonsense, and just replace height with line-height

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

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

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

这篇关于HTML-CSS中心链接中的水平和垂直文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！