Alignement vertical du texte du bouton

J'ai l'épineux problème ici. J'aimerais verticale aligner mon texte à l'intérieur d'un bouton

<button id="rock" onClick="choose(1)">Rock</button>

Et voici mon CSS

button {
    font-size: 22px;
    border: 2px solid #87231C;
    border-radius: 100px;
    width: 100px;
    height: 100px;
    color: #FF5A51;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
button:active {
    font-size: 22px;
    border: 2px solid red;
    border-radius: 100px;
    width: 100px;
    height: 100px;
}

Vous pouvez le vérifier ici http://jsfiddle.net/kA8pp/ . Je veux avoir le texte sur le fond. Merci beaucoup!

EDIT: je ne peux pas l'expliquer bien voici donc la photo de la http://i.imgur.com/WGKltUa.png 🙂

source d'informationauteur Kyrbi

  1. 7

    Essayer padding-top:65px; en classe de bouton

    button {
    font-size: 22px;
    border: 2px solid #87231C;
    border-radius: 100px;
    width: 100px;
    height: 100px;
    color: #FF5A51;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    padding-top:65px;
}

    JS Fiddle Démo

  2. 15

    Vous pouvez utiliser line-height pour atteindre votre objectif.

    button {
    font-size: 22px;
    border: 2px solid #87231C;
    border-radius: 100px;
    width: 100px;
    height: 100px;
    color: #FF5A51;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    line-height: 150px;
    overflow: visible;
}

    http://jsfiddle.net/kA8pp/2/

  3. 10

    Vous pouvez utiliser flexbox (vérifier prise en charge du navigateurselon vos besoins).

    button {
  display: inline-flex;
  align-items: flex-end; 
}
  4. 2

    Boutons Style Différemment: Une Variation sur le Style

    La <button> élément se comporte un peu différemment de certains autres éléments, par exemple un <div>. Si vous définissez display: table-cell dans un bouton, il n'affecte pas la mise en page, de sorte vertical-align vous permettra de contrôler la position du texte.

    D'autre part, on peut effectuer les opérations suivantes: 

    <div class="button" id="rock" onClick="choose(1)">Rock</div>

    et utiliser le code CSS suivant:

    .button {
    font-size: 22px;
    border: 2px solid #87231C;
    border-radius: 100px;
    width: 100px;
    height: 90px;
    color: #FF5A51;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    display: table-cell;
    vertical-align: bottom;
    text-align: center;
    padding-bottom: 10px;
}

    Dans ce cas, vous avez un certain contrôle par le réglage de rembourrage et de la hauteur.

    Si vous êtes à la liaison d'une action JavaScript à l'élément, il n'a pas vraiment beaucoup d'importance ce que le tag, div ou un bouton.

    Cette approche peut certains avantages dans des situations particulières.

    Si vous appliquez le CSS en dessus d'un bouton de la balise, il ne fonctionnera pas. Bon à savoir.

    http://jsfiddle.net/audetwebdesign/QSap8/

  5. 0

    Cela devrait fonctionner pour vous!

    <pre>
.button{
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    color: #444;
    width: 32px;
    padding: 2px;
    margin-left: 5px;
    background-color: #fdfdfd;
    border: 1px solid #cdcdcd;
    cursor: pointer;
}
</pre>