title: How can I vertically center align text inside button?
body: <p>I thought <code>line-height</code> would vertically center align text. But this is not happening for my button. Why?</p>
  
  <p>The text is bottom aligned in FF, Opera and Safari.</p>
  
  <p><a href="http://jsfiddle.net/FFf8Y/2/" rel="nofollow">Her is my fiddle</a>.</p>
  
  <pre><code>&lt;button class="get_discount_rate"&gt;Button&lt;/button&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>button {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    color: #444;
    min-width: 90px;
    height: 24px;
    line-height: 24px;
    margin: 5px 10px;
    background-color: #fdfdfd;
    border: 1px solid #cdcdcd;
    cursor: pointer;
    border-radius: 3px;
  }
  </code></pre>