web-dev-qa-db-fra.com

Centre HTML-CSS Texte horizontalement et verticalement dans un lien

J'essaie de créer un lien qui a une height et une width de 200px . Le texte du lien doit être centré verticalement et horizontalement.

Ceci est mon CSS jusqu'à présent:

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 ceci le code HTML:

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

Le texte est centré horizontalement mais pas verticalement.

Une idée sur la façon de centrer le texte horizontalement et virtiquement?

htmlcssvertical-alignment
26
user1567896

supprimez tout ce qui n'a aucun sens, et remplacez simplement height par 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

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

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

Si le texte ne figure que sur une ligne, vous pouvez utiliser line-height:200px; - où 200px est identique à la valeur height.

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

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

De cette façon, les deux lignes occuperont un total de 40 pixels et le dessus du rembourrage les placera parfaitement au centre. Notez que vous devez ajuster la height en conséquence.

Exemple JSFiddle .

S'il y a plus d'un lien et qu'il comporte un nombre quelconque de lignes, vous aurez besoin de JavaScript pour réparer le remplissage de chacun.

5
James Donnelly

Petit point à ajouter. Si vous supprimez le soulignement (text-decoration: none;), le texte ne sera pas parfaitement centré verticalement. Les liens laissent la place au soulignement. À ma connaissance, il n’existe aucun moyen de le remplacer, sauf d’ajouter un peu de remplissage supérieur. 

2
user2784627

Si le nombre de lignes (ou la hauteur de l'élément interne) n'est pas connu, il existe une autre astuce utilisant display: table et vertical-align:

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

Exemple

Article complet avec détails

1
Strae

Peut-être en utilisant un rembourrage? Comme:

padding-top: 50%;
0
user3133486