Button's text vertical align

Question

I have got tricky problem here. I'd like to vertical align my text inside a button

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

And here is my 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;
}

You can check it out here http://jsfiddle.net/kA8pp/ . I want to have the text on the bottom. Thank you very much!

EDIT: I can't explain it well so here is the picture of it :)

Answer 1

You can use line-height to achieve your goal.

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/

Answer 2

You can use flexbox (check browser support, depending on your needs).

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