it-swarm.com.ru

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>

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

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

26
user1567896

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

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

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

54
Eric Goncalves

В CSS3 вы можете достичь этого с помощью flexbox без каких-либо дополнительных элементов.

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

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

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

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

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

Пример JSFiddle .

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

5
James Donnelly

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

2
user2784627

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

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

Пример

Полная статья с деталями

1
Strae

Может быть, используя padding? Подобно:

padding-top: 50%;
0
user3133486