您必须对两个元素应用垂直对齐：中间对齐，以使其完全居中。

＜div＞<img style=“vertical align:middle”src=“http://lorempixel.com/60/60/">完美居中</span></div>

被接受的答案确实将图标置于旁边文本x高度的一半左右（如CSS规范中所定义）。这可能足够好，但如果文本在顶部或底部有上升部分或下降部分，则可能看起来有点偏离：

左侧的文本未对齐，右侧的文本如上图所示。在这篇关于垂直对齐的文章中可以找到一个实时演示。

有人讨论过为什么垂直对齐：顶部在场景中起作用吗？问题中的图像可能比文本高，因此定义了线框的顶部边缘。垂直对齐：在span元素的顶部，然后将其放置在线框的顶部。

垂直对齐：中间和顶部之间行为的主要区别在于，第一个相对于框的基线移动元素（将其放置在需要实现所有垂直对齐的位置，因此感觉相当不可预测），第二个相对于线框的外部边界移动元素（更为有形）。

因为您必须将行高度设置为div的高度，这样才能工作

多线解决方案：

http://jsfiddle.net/zH58L/6/

<div style="display:table;width:30px;height:160px;">
    <img style="display:table-cell;width:30px;height:60px;padding:50px" src='...' />
    <div style="display:table-cell;height:30px;vertical-align:middle">
      Multiline text centered vertically
    </div>
</div>
<!-- note: img (height + 2x padding) must be equal to root div height -->

适用于所有浏览器和ie9+

显示带对齐项目的柔性：居中；是垂直对齐项目的最佳方式

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

首先，根本不建议使用内联CSS，它确实会破坏HTML。

为了对齐图像和跨度，您可以简单地执行垂直对齐：中间。.居中对齐{垂直对齐：中间；}＜div＞<img class=“align middle”src=“https://i.stack.imgur.com/ymxaR.png"><span class=“align-midle”>我在图像中间！感谢CSS！万岁</span></div>

你可能想要这样：

<div>
   <img style="width:30px; height:30px;">
   <span style="vertical-align:50%; line-height:30px;">Didn't work.</span>
</div>

正如其他人所建议的，尝试在图像上垂直对齐：

<div>
   <img style="width:30px; height:30px; vertical-align:middle;">
   <span>Didn't work.</span>
</div>

CSS并不烦人。你只是没有阅读文档；P