深入解析：Vue3中文本与图片一起垂直居中

原来的文本是垂直居中的，加入图片后，文本就不垂直居中了

原来的代码：

      
送检人：收样室：检验科室：

问题出现的原因是图片的默认垂直对齐方式(vertical-align)是baseline，这会破坏文本的垂直居中效果。

直接通过内联样式设置图片垂直对齐 ：style="height: 28px; vertical-align: middle;"

修改代码：

      
送检人：收样室：检验科室：

应用效果：

---

问题出现的原因是图片的默认垂直对齐方式(vertical-align)是baseline，这会破坏文本的垂直居中效果。以下是几种解决方案：

方案1：设置图片垂直对齐（推荐）

html

送检人：收样室：检验科室：

方案2：使用Flexbox布局

html

送检人：收样室：检验科室：

方案3：修改CSS类（如果.footer-row-col01有独立样式）

css

.footer-row-col01 {display: inline-flex;align-items: center;vertical-align: middle;
}.footer-row-col01 img {vertical-align: middle;margin-left: 4px;
}

方案4：使用相对定位微调

html

送检人：收样室：检验科室：

推荐使用方案1

最简单有效的解决方案是给图片添加vertical-align: middle：

html

这样图片就会与文本的中间对齐，保持整体的垂直居中效果。