title: Button's text vertical align
body: <p>I have got tricky problem here. I'd like to vertical align my text inside a button</p>
  
  <pre><code>&lt;button id="rock" onClick="choose(1)"&gt;Rock&lt;/button&gt;
  </code></pre>
  
  <p>And here is my CSS</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>You can check it out here <a href="http://jsfiddle.net/kA8pp/" rel="noreferrer">http://jsfiddle.net/kA8pp/</a> . I want to have the text on the bottom. <strong>Thank you very much!</strong></p>
  
  <p><strong>EDIT:</strong> I can't explain it well so here is the picture of it  :)</p>
  
  <p><a href="https://i.stack.imgur.com/Ws6Ek.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Ws6Ek.png" alt="enter image description here"></a></p>