Centrer le Texte sur un Bouton

Je sais que cela a été demandé à un couple de fois avant, mais pas de solutions semblent être au travail dans ce cas. Fondamentalement, je veux que le mot "jouer" à être centré verticalement et horizontalement sur ce bouton. Horizontalement, le texte se comporte lui-même, mais à la verticale, peu importe ce que j'essaie, c'est toujours un peu inférieur à ce qu'il devrait, dans tous les navigateurs je l'ai tester sur. Quelqu'un aurait-il des suggestions? Grâce

<style type="text/css">
button {
font-family: Verdana, Geneva, sans-serif;
color: white;
border-style: none;
vertical-align: center;
text-align: center;
}

button:hover {
cursor: pointer;
}

button::-moz-focus-inner /*Remove button padding in FF*/
{ 
border: 0;
padding: 0;
}


.start {
background-color: #0C0;
font-size: 2em;
padding: 10px;

}


</style>
<button type="button" class="start">play</button>
  • c'est juste parce que le texte est inférieur cas. jsfiddle.net/TYZX4/1
  • Bon endroit, mais j'ai juste mesuré sur photoshop et les majuscules version n'est pas encore dans le centre exact. Peut-être que je suis trop pointilleux...
  • ouais à ce moment là, la seule chose que vous pouvez faire est d'utiliser quelque chose comme padding: 5px 10px 10px 10px; jsfiddle.net/TYZX4/2
InformationsquelleAutor Lars | 2011-09-23
  1. 7

    La padding sur .commencer est probablement ce que vous aurez à jouer avec, même si la façon dont il est défini, il convient de centrage, mais vous pouvez la casser à quelque chose comme padding: 8px 10px 10px 10px;

    Vous pouvez également vérifier et régler le line-height sous .commencer et voir si ça aide.

    • Il semble que le défaut de centrage n'est tout simplement pas assez précise donc bien que pas tout à fait aussi élégante, cette méthode a certainement fait le travail. Merci!
    InformationsquelleAutor Doozer Blake
  2. 0

    La valeur correcte pour vertical-align est middle, pas center. Cependant, je ne suis pas sûr si cela va faire la différence, car il peut affecter où le bouton lui-même est aligné verticalement par rapport au texte environnant. Je suis sûr que le texte du bouton est centrée verticalement par défaut, quoique...

    InformationsquelleAutor Niet the Dark Absol