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;       /* 可选：添加与文字的间距 */
}

代码解释：

1. 父容器设置（关键）

   • display: inline-flex：将span转换为行内flex容器，保持行内特性同时可以使用flex布局

   • align-items: center：通过flex布局实现垂直居中

   • vertical-align: middle：作为备用方案，防止flex布局未生效时的保障

2. 图片设置

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

效果