HTML - texte Central CSS horizontalement et verticalement dans un lien

je suis en train de faire un lien qui a un height et width de 200px. Le texte du lien doit être centré verticalement et horizontalement.

C'est mon 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;
}

et ce le code HTML:

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

Le texte est centrée horizontalement mais pas verticalement.

avez-vous une idée de la façon de centrer le texte à la fois horizontalement et virtiquement?

24
demandé sur Igor Ivancha 2013-02-14 00:35:38
la source

6 ответов

supprimez toutes ces autres absurdités, et remplacez juste heightline-height

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

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

45
répondu Eric Goncalves 2013-02-14 00:39:39
la source

Si le texte est sur une seule ligne, vous pouvez utiliser line-height:200px; - où la 200px est le même que le height valeur.

Si le texte est sur plusieurs lignes et sera toujours sur le même nombre de lignes multiples, vous pouvez utiliser padding combinés avec line-height. Exemple avec 2 lignes:

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

de Cette façon, les deux lignes prendra un total de 40px et le rembourrage supérieur met parfaitement dans le milieu. Notez que vous aurez besoin d'ajuster le height conséquent.

JSFiddle exemple.

S'il y a plus d'un lien et qu'il y a n'importe quel nombre de lignes, vous aurez besoin de JavaScript pour fix le rembourrage sur chaque.

5
répondu James Donnelly 2013-02-14 00:44:59
la source

en CSS3, vous pouvez y parvenir avec une flexbox sans aucun élément supplémentaire.

.link {
    display: flex;
    justify-content: center;
    align-items: center;
}
3
répondu Kilves 2018-06-04 10:35:44
la source

Petit point à ajouter. Si vous retirez le soulignement (texte-Décoration: Aucun;) alors le texte ne sera pas parfaitement centré verticalement. Les liens laissent de l'espace pour le soulignement. À ma connaissance, il n'existe aucun moyen de remplacer ce sauf à ajouter un peu plus haut rembourrage.

2
répondu user2784627 2014-11-19 20:15:29
la source

si le nombre de lignes (ou la hauteur de l'élément intérieur) n'est pas connu, il y a un autre truc en utilisant display: table et vertical-align:

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

Exemple

article Complet avec les détails

1
répondu Strae 2017-01-10 12:48:18
la source

peut-être en utilisant du rembourrage? Comme:

padding-top: 50%;
0
répondu 2018-07-04 02:55:38
la source

Autres questions sur