HTML-CSS-Center Text horizontal und vertikal in einem Link

Question

Ich versuche, einen Link zu machen, die ein height und width von 200px hat. Der Text des Links muss vertikal und horizontal zentriert sein.

Das ist mein CSS so weit:

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

und das ist der HTML-Code:

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

Der Text horizontal, aber nicht vertikal zentriert ist.

Jede Idee, wie der Text sowohl Horizontal und vertikal zentriert erhalten?

Answer 1

all den anderen Unsinn, entfernen und ersetzen Sie einfach height mit line-height

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

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

Answer 2

Wenn der Text nur auf einer Linie ist, können Sie line-height:200px; verwenden - wo die 200px ist das gleiche wie der height Wert.

Wenn der Text mehrere Zeilen enthält und immer die gleiche Anzahl von Zeilen enthält, können Sie padding kombiniert mit line-height verwenden. Beispiel mit 2 Zeilen:

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

diese Weise die beiden Linien insgesamt 40px aufnehmen wird und die Polsterung oben sie perfekt in der Mitte bringt. Beachten Sie, dass Sie die height entsprechend anpassen müssen.

JSFiddle example.

Wenn es mehr als einen Link, und es wird eine beliebige Anzahl von Zeilen haben, werden Sie einige Begleit JavaScript fix die Polsterung auf jeder brauchen.

Answer 3

Kleiner Punkt hinzuzufügen. Wenn Sie die Unterstreichung entfernen (text-decoration: none;), wird der Text nicht perfekt zentriert. Links lassen Platz für die Unterstreichung. Nach meinem Wissen gibt es keine Möglichkeit, dies zu überschreiben, außer dass ein wenig extra Top-Padding hinzugefügt wird.

Answer 4

Wenn die Anzahl der Zeilen (oder die innere Elementhöhe) nicht bekannt ist, gibt es einen anderen Trick display: table und vertical-align mit:

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

Example

Full article with details