如何在 SPAN 内垂直居中图像答案

【问题标题】：How to vertically center an image inside a SPAN如何在 SPAN 内垂直居中图像
【发布时间】：2015-01-17 03:13:34
【问题描述】：

我有以下 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;
}

输出：

主页图标不在两条橙色线之间垂直居中，而文字居中。

请帮助居中。

如果我从图像中删除垂直对齐并且发生这种情况：

【问题讨论】：

您使用了很多个跨度。在我看来，其他更多语义元素可能更适合您。
你需要的是一个行高，它应该与块的高度相同。应该对齐图像。
How do I vertically align something inside a span tag?的可能重复
这是一个由 ASP.net 生成的面包屑
然后添加span.breadcrumb > span {line-height: 30px; height: 30px;}

标签： html css

【解决方案1】：

为您的图像设置display:inline-block 和vertical-align:middle，参见下面的sn-p：

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

【讨论】：

额外的 SPAN 由 ASP.net 自动生成，我无法控制，但谢谢。我会测试一下。
这就是为什么我说我只删除了这个 sn-p ;)
它给了我相同的显示，但我认为这是最接近的。感谢您的尝试:)
你能提供你那部分的图片和代码吗？我会帮你解决的
这里是jsfiddle.net/rryw0er7，你可以根据img上设置的vertical-align: calc(30px - 23px);随意改变图标的对齐方式