title: How to vertically center an image inside a SPAN
body: <p>I have the following HTML:</p>
  
  <pre><code>&lt;span id="ctl00_smpWeb" class="breadcrumb hidOverflow"&gt;
      &lt;span&gt;
          &lt;a href="default.aspx" title="Home"&gt;
              &lt;img src="umb.png" alt="Home" title="Home" class="home" style="vertical-align: middle;" /&gt;
          &lt;/a&gt;
      &lt;/span&gt;
      &lt;span&gt;&lt;/span&gt;
      &lt;span&gt;Services&lt;/span&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.breadcrumb {
      font: 9px 'Verdana', 'Graduate', 'Arial', 'Helvetica', 'sans-serif';
      height: 30px;
      color: #9b9b9b;
      width: 100%;
      font-weight: bold;
  }
  .hidOverflow {
      overflow: hidden;
  }
  </code></pre>
  
  <p>Outputs:</p>
  
  <p><img src="https://i.stack.imgur.com/Uk6Ue.png" alt="enter image description here"></p>
  
  <p>The home icon is not centered vertically between the two orange line, while the text is.</p>
  
  <p>Please help center it.</p>
  
  <p>If I remove the vertical align from the image and this happens:</p>
  
  <p><img src="https://i.stack.imgur.com/3BNqg.png" alt="enter image description here"></p>