实际上，在这种情况下非常简单：对图像应用垂直对齐。因为它都在一行中，所以它实际上是您想要对齐的图像，而不是文本。

<!-- 将“垂直对齐：中间”样式从span移动到img-->＜div＞<img style=“vertical align:middle”src=“https://via.placeholder.com/60x60“alt=”显示文本60 x 60的灰色图像“><span style=“”>有效</span></div>

在FF3中测试。

现在，您可以将flexbox用于这种类型的布局。

.box格式{显示：柔性；对齐项目：居中；}<div class=“box”><img src=“https://via.placeholder.com/60x60"><span style=“”>有效</span></div>

在css中使用flex属性。

通过在flex中使用对齐项将文本垂直居中对齐：居中；如果要通过在flex中使用“对齐内容：中心；”将文本水平居中对齐；。

第二部分{显示：柔性；对齐项目：居中；}＜div＞<img src=“http://lorempixel.com/30/30/“alt=”小img“/><span>它起作用了</span></div>

在css中使用表单元格。

第二部分{显示：表格；}第二部分*{显示：表格单元格；垂直对齐：中间；}＜div＞<img src=“http://lorempixel.com/30/30/“alt=”小img“/><span>它起作用了</span></div>

我同意，这可能令人困惑。尝试利用表格功能。我使用这个简单的CSS技巧将情态动词放在网页的中心。它具有大型浏览器支持：

<div class="table">
    <div class="cell">
        <img src="..." alt="..." />
        <span>It works now</span>
    </div>
</div>

和CSS部分：

.table { display: table; }
.cell { display: table-cell; vertical-align: middle; }

请注意，您必须设置图像和表格容器的样式并调整其大小，以使其按您的需要工作。享受

在这些答案中还没有找到一个有余量的解决方案，所以这里是我对这个问题的解决方案。

只有当您知道图像的宽度时，此解决方案才有效。

HTML

<div>
    <img src="https://placehold.it/80x80">
    <span>This is my very long text what should align. This is my very long text what should align.</span>
</div>

CSS

div {
  overflow:hidden;
}
img {
   width:80px
   margin-right:20px;
   display:inline-block;
   vertical-align:middle;
}
span {
   width:100%;
   margin-right:-100px;
   padding-right:100px;
   display:inline-block;
   vertical-align:middle;
   box-sizing:border-box;
   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
}

background:url(../images/red_bullet.jpg) left 3px no-repeat;

我通常用3px代替top。通过增加/减少该值，可以将图像更改为所需的高度。

对于记录，对齐“命令”不应该在SPAN上工作，因为它是一个内嵌标记，而不是块级标记。对齐、边距、填充等功能在内联标记上不起作用，因为内联的目的是不中断文本流。

CSS将HTML标记分为两组：内联和块级。搜索“css block vs inline”，会出现一篇很棒的文章。。。

http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

（理解CSS的核心原则是它不那么烦人的关键）