如何在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;
}

输出结果:

主页图标在两条橙色线的垂直中心不对齐，而文本是对齐的。

请帮忙使其居中。

如果我从图像中删除了垂直对齐，则会出现以下情况:

- SearchForKnowledge

---

你使用了很多的<span>元素..我认为其他更语义化的元素可能更适合你。 - Paulie_D

你需要的是一个行高，它应该与块的高度相同。这样就可以使图像对齐。 - Andi

可能是重复的问题：如何在span标签内垂直对齐内容？ - vaso123

这是由ASP.net生成的面包屑导航。 - SearchForKnowledge

然后添加 span.breadcrumb > span {line-height: 30px; height: 30px;} - vaso123

Answer 1

将您的图像设置为 display:inline-block 和 vertical-align:middle，请参见下面的代码片段：

.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>

- dippas

---

额外的SPAN是由ASP.net自动生成的，我无法控制，但谢谢。我会测试一下。 - SearchForKnowledge

它给了我相同的显示，但我认为这是它能够达到的最接近的。谢谢你的尝试 :) - SearchForKnowledge

你可以提供那一部分的图片和代码吗？我会为你修复它。 - dippas

当然，这是链接：http://jsfiddle.net/3ek7t2ur/ （图标垂直居中不了）！谢谢。 - SearchForKnowledge

这是链接：http://jsfiddle.net/rryw0er7/，你可以根据在`img`上设置的`vertical-align: calc(30px - 23px);`来随意更改图标的对齐方式。 - dippas