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

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

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

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

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

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

我同意，这可能令人困惑。尝试利用表格功能。我使用这个简单的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; }

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

可以使用display属性将图像设置为内联元素

＜div＞<img style=“vertical align:middle；display:inline；”src=“https://placehold.it/60x60"><span style=“vertical align:middle；display:inline；”>有效</span></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中演示）现代方法

网格布局的缺点

较旧的浏览器支持更具挑战性网格布局通常需要更有经验的开发人员来正确实现，而不是像块/内联块显示那样简单

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

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

接受答案中使用的技术仅适用于单行文本（demo），而不适用于多行文本（demo），如这里所述。

如果有人需要将多行文本垂直居中放置到图像中，以下是几种方法（方法1和方法2受此CSS技巧文章启发）

方法#1：CSS表格（FIDDLE）（IE8+（犬））

CSS:

div {
    display: table;
}
span {
    vertical-align: middle;
    display: table-cell;
}

方法#2：容器上的伪元素（FIDDLE）（IE8+）

CSS:

div {
   height: 200px; /* height of image */
}

div:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

img {
    position: absolute;
}

span {
  display: inline-block;
  vertical-align: middle;
  margin-left: 200px;  /* width of image */
}

方法3：Flexbox（FIDDLE）（犬用）

CSS（上面的fiddle包含供应商前缀）：

div {   
    display: flex; 
    align-items: center;    
}
img {
    min-width: 200px; /* width of image */
}