title: vertical-align:middle for text in button
body: <p>I have this layout:</p>
  
  <p><img src="https://i.stack.imgur.com/Yru7c.png" alt="layout"></p>
  
  <p><strong>My CSS</strong>:</p>
  
  <pre><code>body {
       background: #e2eaed;
  }
  a {
       text-decoration: none;
       color: #fff;
       font-size: 30px;
       height: 62px;
       line-height: 62px;
       /* vertical-align: middle is not works  */
       background: #8dc73f;
       width: 132px;
       padding: 0 25px;
       font-size: 16px;
       text-align: center;
       font-weight: bold;
       margin-left: 4px;
       display: block;
       float: left;
  }
  </code></pre>
  
  <p>​When button has 1-line text, my code works well. But when button has 2-line text, like in the image above. The code text has big height, because I use the <code>line-height</code> property. I have tried <code>vertical-align</code> but it is not working.</p>
  
  <p>Please, see <a href="http://jsfiddle.net/nJj2c/2/" rel="nofollow noreferrer">jsfiddle</a>.</p>