CSS实现图片垂直居中方法
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>效果
