html
<div class="footer border-top-row">
<div class="footer-row">
<span class="footer-row-col01"
>制单人：{{ printData[pageIndex - 1].rkMaster.makerName
}}<img :src="getPersonSignImgSrc(printData[pageIndex - 1].rkMaster.makerName!)" alt="" style="height: 28px"
/></span>
<span class="footer-row-col02"
>审核人：{{ printData[pageIndex - 1].rkMaster.makerName
}}<img :src="getPersonSignImgSrc(printData[pageIndex - 1].rkMaster.makerName!)" alt="" style="height: 28px"
/></span>
</div>
<div class="footer-row pageNum">
<span>第 {{ printData[pageIndex - 1].pageIndex }} 页 / 共 {{ printData[pageIndex - 1].pageCount }} 页</span>
</div>
</div>可以通过以下CSS设置实现图片垂直居中：
css
复制
下载
.footer-row-col01,
.footer-row-col02 {
display: inline-flex; /* 启用flex布局 */
align-items: center; /* 垂直居中 */
vertical-align: middle; /* 双重保障 */
}
.footer-row-col01 img,
.footer-row-col02 img {
vertical-align: middle; /* 图片自身垂直对齐 */
margin-left: 4px; /* 可选：添加与文字的间距 */
}
代码解释：
-
父容器设置（关键）
-
display: inline-flex：将span转换为行内flex容器，保持行内特性同时可以使用flex布局 -
align-items: center：通过flex布局实现垂直居中 -
vertical-align: middle：作为备用方案，防止flex布局未生效时的保障
-
-
图片设置
-
vertical-align: middle：修正行内元素的默认基线对齐问题 -
margin-left：可选，用于增加图片与前面文字的间距
-
补充说明：
-
如果遇到间距问题，可以尝试在父容器添加
gap: 4px属性 -
确保父级元素有足够的高度，垂直居中效果才能明显
-
如果使用Sass/Less等预处理器，建议将这些样式封装到对应的class中
最终效果：图片将与同行的文字在垂直方向上完美对齐，无论字号如何变化都能保持居中状态。
css
<style scoped lang="scss">
.footer {
// 子绝
position: absolute;
bottom: 0;
&-row {
display: flex;
height: 30px;
line-height: 30px;
&-col01 {
width: 480px;
}
&-col02 {
width: 238px;
}
&-col01,
&-col02 {
display: flex; /* 启用flex布局 */
align-items: center; /* 垂直居中 */
vertical-align: middle; /* 双重保障 */
gap: 10px; /* 横向间距 */
}
}
</style>效果
