title: vertical-align is off center slightly
body: <p>I have the below code which is supposed to display an icon vertically aligned in the middle of the line of text its in. For some reason when I vertically align it in the middle it is slightly off center still (the icon is closer to the bottom and not exactly in the middle), what might be causing this and how can I get it directly in the middle?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.text-heading {
    padding: 30px 20px 10px;
    font-size:50px;
  }
  
  button {
    background:none;
    border:none;
    vertical-align:middle;
  
  }
  
  button img {
    height:10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h2 class="text-heading"&gt;&lt;span&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat &lt;/span&gt;&lt;button class="text-more-info" type="button"&gt;&lt;img alt="info" src="https://freeiconshop.com/wp-content/uploads/edd/info-circle-outline.png"&gt;&lt;/button&gt;&lt;/h2&gt;</code></pre>
  </div>
  </div>
  </p>