How to vertically center an image inside a SPAN

Question

I have the following HTML:

<span id="ctl00_smpWeb" class="breadcrumb hidOverflow">
    <span>
        <a href="default.aspx" title="Home">
            <img src="umb.png" alt="Home" title="Home" class="home" style="vertical-align: middle;" />
        </a>
    </span>
    <span></span>
    <span>Services</span>
</span>

CSS:

.breadcrumb {
    font: 9px 'Verdana', 'Graduate', 'Arial', 'Helvetica', 'sans-serif';
    height: 30px;
    color: #9b9b9b;
    width: 100%;
    font-weight: bold;
}
.hidOverflow {
    overflow: hidden;
}

Outputs:

The home icon is not centered vertically between the two orange line, while the text is.

Please help center it.

If I remove the vertical align from the image and this happens:

Answer 1

Set a display:inline-block and vertical-align:middle to your image, see snippet below:

.breadcrumb {
  font: 9px'Verdana', 'Graduate', 'Arial', 'Helvetica', 'sans-serif';
  height: 30px;
  color: #9b9b9b;
  width: 100%;
  font-weight: bold;
}
.hidOverflow {
  overflow: hidden;
}
.home {
  display: inline-block;
  vertical-align: middle
}
a {
  text-decoration: none;
  /* just for demo */
}

<span id="ctl00_smpWeb" class="breadcrumb hidOverflow">
  <span>
    <a href="default.aspx" title="Home">
      <img src="http://placehold.it/100x100&text=home" alt="Home" title="Home" class="home" />
    </a>
  </span> 
  <span></span>
  <span>Services</span>
</span>