为什么不垂直对齐：中间工作？然而，垂直对齐：顶部确实有效。
跨度{垂直对齐：中间；}＜div＞<img src=“https://via.placeholder.com/30“alt=”小img“/><span>不起作用</span></div>
当前回答
对于记录，对齐“命令”不应该在SPAN上工作，因为它是一个内嵌标记，而不是块级标记。对齐、边距、填充等功能在内联标记上不起作用，因为内联的目的是不中断文本流。
CSS将HTML标记分为两组：内联和块级。搜索“css block vs inline”，会出现一篇很棒的文章。。。
http://www.webdesignfromscratch.com/html-css/css-block-and-inline/
（理解CSS的核心原则是它不那么烦人的关键）
其他回答
您可以做的另一件事是将文本的行高度设置为＜div＞中图像的大小。然后将图像设置为垂直对齐：中间；
这是最简单的方法。
2022年，浏览器支持率达到96%，我很惊讶没有人建议使用网格布局。
在本JSFiddle中，3行是实现OP目标所需的全部内容（但提供了多条路线以供比较）：
div {
display: grid;
grid-template-columns: min-content max-content;
align-items: center
}
一个额外的UI细节将包括可选的gap属性的使用，该属性允许调整父网格容器（div）中每个网格项之间的空间。
网格布局的优势
轻松垂直和水平对齐网格项网格项之间的空间调制任何大小的图像（使用最小内容）和文本长度（使用最大内容的一行或使用最小内容的换行（未在fiddle中显示））都可以工作-无需在CSS中硬编码图像尺寸（两种用法都在JSFiddle中演示）现代方法
网格布局的缺点
较旧的浏览器支持更具挑战性网格布局通常需要更有经验的开发人员来正确实现，而不是像块/内联块显示那样简单
因为您必须将行高度设置为div的高度，这样才能工作
不知道为什么它不在导航浏览器上显示，但我通常在尝试显示带有图像和居中文本的标题时使用这样的代码段，希望它有所帮助！
https://output.jsbin.com/jeqorahupo
<hgroup style="display:block; text-align:center; vertical-align:middle; margin:inherit auto; padding:inherit auto; max-height:inherit">
<header style="background:url('http://lorempixel.com/30/30/') center center no-repeat; background-size:auto; display:inner-block; vertical-align:middle; position:relative; position:absolute; top:inherit; left:inherit; display: -webkit-box; display: -webkit-flex;display: -moz-box;display: -ms-flexbox;display: flex;-webkit-flex-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;">
<image src="http://lorempixel.com/60/60/" title="Img title" style="opacity:0.35"></img>
http://lipsum.org</header>
</hgroup>
第二部分{显示：柔性；对齐项目：居中；}＜div＞<img src=“http://lorempixel.com/30/30/“alt=”小img“/><span>它起作用了</span></div>
