HTML-CSS Center Text horizontally and vertically in a link

Question

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.

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;
}

and this the HTML-code:

<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?

question from:https://stackoverflow.com/questions/14862604/html-css-center-text-horizontally-and-vertically-in-a-link

Answer 1

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/