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

＜div＞<img style=“vertical align:middle；display:inline；”src=“https://placehold.it/60x60"><span style=“vertical align:middle；display:inline；”>有效</span></div>

接受答案中使用的技术仅适用于单行文本（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 */
}

2022年，浏览器支持率达到96%，我很惊讶没有人建议使用网格布局。

在本JSFiddle中，3行是实现OP目标所需的全部内容（但提供了多条路线以供比较）：

div {
    display: grid;
    grid-template-columns: min-content max-content;
    align-items: center
}

一个额外的UI细节将包括可选的gap属性的使用，该属性允许调整父网格容器（div）中每个网格项之间的空间。

网格布局的优势

轻松垂直和水平对齐网格项网格项之间的空间调制任何大小的图像（使用最小内容）和文本长度（使用最大内容的一行或使用最小内容的换行（未在fiddle中显示））都可以工作-无需在CSS中硬编码图像尺寸（两种用法都在JSFiddle中演示）现代方法

网格布局的缺点

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

在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>

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

写下这些跨度财产

span{
    display:inline-block;
    vertical-align:middle;
}

使用显示：内联块；当您使用vertical-align属性时。这些是关联的财产