web-dev-qa-db-fra.com

Centrage vertical du texte dans un bloc en ligne

J'essaie de créer des boutons pour un site Web à l'aide d'hyperliens de style. J'ai réussi à faire en sorte que le bouton ressemble à ce que je veux, sauf un léger problème. Je ne peux pas obtenir le texte ("Lien" dans le code source ci-dessous) pour centrer verticalement.

Malheureusement, il peut y avoir plusieurs lignes de texte, comme illustré avec le deuxième bouton, je ne peux donc pas utiliser line-height pour le centrer verticalement.

Ma première solution a été d'utiliser display: table-cell; plutôt que inline-block, et qui trie le problème dans Chrome, Firefox et Safari mais pas dans Internet Explorer, je pense donc que je dois m'en tenir au blocage en ligne.

Comment pourrais-je centrer verticalement le texte du lien dans le 57px X 100pxinline-block, et doit-il répondre à plusieurs lignes de texte? Merci d'avance.

CSS:

.button {
    background-image:url(/images/categorybutton-off.gif);
    color:#000;
    display:inline-block;
    height:57px;
    width:100px;
    font-family:Verdana, Geneva, sans-serif;
    font-size:10px;
    font-weight:bold;
    text-align:center;
    text-decoration:none;
    vertical-align:middle;
}
.button:hover {
    background-image:url(/images/categorybutton-on.gif);
}
.button:before {
    content:"Click Here For\A";
    font-style:italic;
    font-weight:normal !important;
    white-space:pre;
}

HTML:

<a href="/" class="button">Link</a>
<a href="/" class="button">Link<br />More Details</a>
htmlvertical-alignmentcenteringcss
25
Josh Bowe

Enveloppez votre texte avec une étendue (Centré) et écrivez une autre étendue vide juste avant (Centré) comme ceci.

HTML: 

<a href="..." class="button">
  <span class="Centerer"></span>
  <span class='Centered'>Link</span>
</a>

[~ # ~] css [~ # ~] 

.Centered
{
    vertical-align: middle;
    display: inline-block;
}

.Centerer
{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

Jetez un œil ici: http://jsfiddle.net/xVnQ6/

19
avrahamcool

Merci beaucoup @avrahamcool, fonctionne comme un charme!

J'ai une petite mise à jour. Vous pouvez remplacer le .Centerer span redondant par css

.button:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

Voir la démo ici: http://jsfiddle.net/modernweb/bXD2V/

REMARQUE: cela ne fonctionnera pas avec le texte dans l'attribut "contenu".

32
Rafal Gałka