深入解析：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

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