title: Vertically align text in a bootstrap anchor (button)
body: <p>I'm struggling to vertically align text within a Bootstrap (3) <code>&lt;a&gt;</code> when it works properly in a <code>&lt;button&gt;</code></p>
  
  <p>The HTML :</p>
  
  <pre><code>&lt;button class="btn"&gt;some text&lt;span class="glyphicon glyphicon-play pull-right"&gt;&lt;/span&gt;&lt;/button&gt;
  &lt;/br&gt;
  &lt;/br&gt;
  &lt;/br&gt;
  &lt;a href="#" class="btn"&gt;some text&lt;span class="glyphicon glyphicon-play pull-right"&gt;&lt;/span&gt;&lt;/a&gt;
  </code></pre>
  
  <p>The CSS : </p>
  
  <pre><code>.btn {
    width: 315px;
    height: 40px;
    background-color: #ff38a4;
    color: #fff;
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: left;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 4px 8px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.5);
    box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.5);
  }
  </code></pre>
  
  <p>And the output :</p>
  
  <p><a href="https://i.stack.imgur.com/GYcf9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GYcf9.png" alt="Screen shot of unaligned images"></a></p>
  
  <p>And a codepen of the problem : <a href="http://codepen.io/anon/pen/vyOaao" rel="nofollow noreferrer">http://codepen.io/anon/pen/vyOaao</a></p>
  
  <p>How do I align the text and icon centrally using an <code>&lt;a&gt;</code> tag?</p>