HTML-CSS Center Tekst w poziomie i w pionie w linku

Question

Próbuję utworzyć łącze, które ma height i width z 200px. Tekst linku powinien być wyśrodkowany w pionie i poziomie.

To jest mój CSS tej pory:

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

i ten kod HTML:

<tr> 
    <td> 
    <a class="Kachel" href="#">Test</a> 
    </td> 
</tr> 

tekst wyśrodkowany w poziomie, ale nie pionowo.

Każdy pomysł, jak uzyskać tekst wyśrodkowany zarówno w poziomie, jak i w pionie?

Answer 1

usunąć wszystkie te inne bzdury, i po prostu zastąpić height z line-height

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

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

Answer 2

Jeśli tekst jest tylko na jednej linii, można użyć line-height:200px; - gdzie 200px jest taka sama jak wartość height.

Jeśli tekst jest na wielu liniach i zawsze będzie na tej samej liczbie wielu linii, można użyć padding w połączeniu z line-height. Przykład 2 linie:

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

ten sposób dwie linie odbędzie się łącznie 40 pikseli i wyściółka top umieszcza je doskonale w środku. Zauważ, że musisz odpowiednio dostosować height.

JSFiddle example.

Jeśli istnieje więcej niż jedno łącze i będzie ono zawierało dowolną liczbę linii, konieczne będzie dołączenie niektórych skryptów JavaScript do poprawek.

Answer 3

Mały punkt do dodania. Jeśli usuniesz podkreślenie (dekoracja tekstu: brak;), tekst nie zostanie idealnie wyśrodkowany w pionie. Łącza pozostawiają miejsce na podkreślenie. Zgodnie z moją wiedzą nie ma sposobu, aby to zmienić, z wyjątkiem dodania trochę dodatkowego dopełnienia.

Answer 4

Jeśli liczba wierszy (lub wewnętrzna wysokość elementu) nie jest znana, istnieje inna sztuczka z użyciem display: table i vertical-align:

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

Example

Full article with details