Button's text vertical align - html

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;
}

Answer 3

Try padding-top:65px; in button class
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 Demo

Answer 4

Buttons Style Differently: A Variation on Styling
The <button> element behaves a bit differently from some other elements, say a <div>. If you set display: table-cell in a button, it does not affect the layout, so vertical-align will allow you to control the text position.
On the other hand, one could do the following:
<div class="button" id="rock" onClick="choose(1)">Rock</div>
and use the following CSS:
.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;
}
In this case, you have some control by adjusting padding and height.
If you are binding a JavaScript action to the element, it does not really matter all that much what the tag is, div or button.
This approach may some advantages in particular situations.
If you apply the above CSS to a button tag, it will not work. Good to know.
http://jsfiddle.net/audetwebdesign/QSap8/

Answer 5

This should work for you!
<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>