Html 如何在跨度内垂直居中放置图像

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

产出：

主图标未垂直居中于两条橙色线之间，而文本为

请帮我把它放在中心

如果我从图像中删除垂直对齐，则会发生以下情况：

---

设置图像的

显示：内联块

和

垂直对齐：中间

，请参见下面的代码片段：

.breadcrumb{
字体：9px'Verdana'，'Graduate'，'Arial'，'Helvetica'，'sans serif'；
高度：30px；
颜色：#9b9b9b；
宽度：100%；
字体大小：粗体；
}
希德先生{
溢出：隐藏；
}
.家{
显示：内联块；
垂直对齐：中间对齐
}
a{
文字装饰：无；
/*只是为了演示*/
}

服务

您使用了很多跨距。在我看来，其他更具语义的元素可能更适合您。这里需要的是一个与块高度相同的线条高度。这可能是ASP.net生成的面包屑。然后添加

span.Breadcrumb>span{lineheight:30px；height:30px；}

额外的span是由ASP.net自动生成的，我无法控制，但谢谢。我将测试它。这就是为什么我说我只删除了这段代码；）它给了我同样的显示，但我认为这是最接近的。谢谢您的尝试：）您能提供该部件的图像和代码吗？我会帮你解决这个问题，你可以根据

垂直对齐：calc（30px-23px）改变图标的对齐方式在
img上设置
.breadcrumb {
    font: 9px 'Verdana', 'Graduate', 'Arial', 'Helvetica', 'sans-serif';
    height: 30px;
    color: #9b9b9b;
    width: 100%;
    font-weight: bold;
}
.hidOverflow {
    overflow: hidden;
}