title: How to vertical align icon inside label and button in the same way
body: <p>I'm trying to center vertically an icon inside an ul/li tag.
  Depending if placing the icon inside a button tag and label tag I get two different results and I can not get the alignment in the label working. </p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;&lt;label class="btn"&gt;&lt;i class="fa fa-anchor"&gt;&lt;/i&gt;&lt;/label&gt;&lt;/li&gt;
      &lt;li&gt;&lt;button class="btn"&gt;&lt;i class="fa fa-anchor"&gt;&lt;/i&gt;&lt;/button&gt;&lt;/li&gt;
      &lt;li&gt;&lt;button class="btn"&gt;&lt;i class="fa fa-anchor"&gt;&lt;/i&gt;&lt;/button&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>li{
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    box-sizing: border-box;
    margin: 0;
    border: 1px solid;
  }
  
  button,
  label{
    position: relative;
    cursor: pointer;
    padding: 0;
    margin: 0;
    background: transparent;
    color: inherit;
    font-size: 16px;
    border: none;
   outline: none;
    width: 41px;
    height: 41px;
    padding: 0 5px;
    margin: 0 2px;
    text-align: center;
    display: inline-block;
    box-sizing: border-box;
  }
  
    button:hover,
    label:hover{
    background-color: #4E84BB;
    color: white;
  }
  </code></pre>
  
  <p>Please see the fiddle: <a href="http://jsfiddle.net/zbhjco0j/" rel="nofollow">http://jsfiddle.net/zbhjco0j/</a></p>
  
  <p>How do I center the icon in both scenario?</p>
  
  <p>thanks</p>