webentwicklung-frage-antwort-db.com.de

HTML-CSS Center Text horizontal und vertikal in einem Link

Ich versuche einen Link zu erstellen, der eine height und eine width von 200px hat ..__ Der Text des Links soll vertikal und horizontal zentriert sein.

Dies ist mein CSS bisher:

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 dazu der HTML-Code:

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

Der Text ist horizontal zentriert, jedoch nicht vertikal.

Haben Sie eine Idee, wie Sie den Text sowohl horizontal als auch virtuell zentrieren lassen?

26
user1567896

entfernen Sie den ganzen anderen Unsinn und ersetzen Sie einfach height durch 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

In CSS3 können Sie dies mit einer Flexbox ohne zusätzliche Elemente erreichen.

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

Wenn sich der Text nur in einer Zeile befindet, können Sie line-height:200px; verwenden, wobei der Wert 200px dem Wert height entspricht.

Wenn sich der Text in mehreren Zeilen und immer in derselben Anzahl von mehreren Zeilen befindet, können Sie padding in Kombination mit line-height verwenden. Beispiel mit 2 Zeilen: 

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

Auf diese Weise nehmen die beiden Linien insgesamt 40px in Anspruch und werden durch das Polsteroberteil perfekt in die Mitte gesetzt. Beachten Sie, dass Sie die height entsprechend anpassen müssen.

JSFiddle Beispiel .

Wenn mehr als ein Link vorhanden ist und eine beliebige Anzahl von Zeilen vorhanden ist, benötigen Sie JavaScript, um fix den Abstand in jeder Zeile zu definieren.

5
James Donnelly

Kleiner Punkt zum Hinzufügen. Wenn Sie die Unterstreichung entfernen (Textdekoration: keine;), wird der Text nicht perfekt vertikal zentriert. Links lassen Platz für die Unterstreichung. Meines Wissens gibt es keine Möglichkeit, dies außer Kraft zu setzen, außer ein paar zusätzliche Top-Polsterungen hinzuzufügen. 

2
user2784627

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

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

Beispiel

Vollständiger Artikel mit Details

1
Strae

Vielleicht mit padding? Mögen:

padding-top: 50%;
0
user3133486