HTML-CSS Center Текст по горизонтали и вертикали по ссылке

Я пытаюсь сделать ссылку, которая имеет height и width 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>

Текст горизонтально центрирован, но не вертикально.

Любая идея, как получить текст, центрированный как по горизонтали, так и по-доброму?

Ответы

Ответ 1

удалите всю эту чушь и просто замените height на line-height

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

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

Ответ 2

Если текст находится только в одной строке, вы можете использовать line-height:200px; - где 200px совпадает с значением height.

Если текст находится на нескольких строках и всегда будет на одном и том же числе нескольких строк, вы можете использовать padding в сочетании с line-height. Пример с двумя строками:

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

Таким образом, две линии будут занимать в общей сложности 40 пикселей, а верхняя часть дополняет их в середине. Обратите внимание, что вам нужно соответствующим образом отрегулировать height.

Пример JSFiddle.

Если есть несколько ссылок, и у них будет любое количество строк, вам понадобится некоторый сопутствующий JavaScript для исправления прокладки на каждом из них.

Ответ 3

Маленькая точка для добавления. Если вы удалите подчеркивание (text-decoration: none;), текст не будет идеально центрирован по вертикали. Ссылки оставляют место для подчеркивания. Насколько мне известно, нет возможности переопределить это, кроме как добавить немного дополнительных верхних дополнений.

Ответ 4

Если количество строк (или высота внутреннего элемента) неизвестно, есть еще один трюк с использованием display: table и vertical-align:

.wrapper{
    display: table;
}
.link{
    display: table-cell;
    vertical-align: middle;
}

Пример

Полная статья с подробностями