HTML-CSS centrer le Texte horizontalement et verticalement dans un lien

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

C'est mon CSS pour l'instant:

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.

Aucune idée comment faire pour obtenir le texte centré à la fois horizontalement et virtically?

InformationsquelleAutor user1567896 | 2013-02-13
  1. 57

    supprimer tous les autres non-sens, et il suffit de remplacer height avec line-height

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

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

    • Merci beaucoup. Il est parfois facile :).
    • que faire si le lien a height: 100%?
    • généralement, la hauteur de la ligne verticale aligne si sa fixée à 150%, ce qui, je l'utiliserais si l'élément de hauteur ont été fixés à 100%
    • Cette solution fait beaucoup de sens, mais seulement si le texte du lien est une seule ligne. Je suis actuellement en train de trouver un moyen de la verticale-aligner le texte du lien qui varie de 1 à plusieurs lignes.
    InformationsquelleAutor Eric Goncalves
  2. 16

    En CSS3, vous pouvez réaliser cela avec un flexbox, sans éléments supplémentaires.

    .link {
    display: flex;
    justify-content: center;
    align-items: center;
}
    InformationsquelleAutor Kilves
  3. 5

    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é avec line-height. Exemple avec 2 lignes: 

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

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

    JSFiddle exemple.

    Si il n'y a plus qu'un lien et qu'il y ait un certain nombre de lignes, vous aurez besoin d'un accompagnement JavaScript pour fixer le rembourrage sur chaque.

    InformationsquelleAutor James Donnelly
  4. 2

    Petit point à ajouter. Si vous supprimez le trait de soulignement (text-decoration: none;) alors le texte n'est pas parfaitement centré verticalement. Liens de laisser de l'espace pour le souligner. À ma connaissance, il n'existe aucun moyen de remplacer ce sauf à ajouter un peu plus haut rembourrage.

    InformationsquelleAutor user2784627
  5. 1

    Si le nombre de lignes (ou de l'intérieur de l'élément de hauteur) n'est pas connue, il y a un autre truc à l'aide de display: table et vertical-align:

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

    Exemple

    Article complet avec les détails

    InformationsquelleAutor Strae
  6. 0

    Peut-être à l'aide de rembourrage? Comme:

    padding-top: 50%;
    • Comment est-ce différent de l'autre les réponses ici?
    InformationsquelleAutor