CSS实现图片垂直居中方法

html

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

html 复制代码
<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>

效果

相关推荐
Oriel1 分钟前
在 Strapi v4 中生成专业 API 文档
前端·后端
WildBlue2 分钟前
解锁 Babel - JSX 编译:前端魔法背后的秘密🥳
前端·react.js
南方kenny2 分钟前
React 魔法揭秘:useRef 与 forwardRef 的奇妙之旅
前端·javascript·react.js
LaoZhangAI4 分钟前
Playwright MCP完整指南:AI驱动的浏览器自动化测试革命2025
前端·后端
前端Hardy5 分钟前
Python 打造 Excel 到 JSON 转换工具:从开发到打包全攻略
前端·后端·python
guiyanakaung6 分钟前
CMP 如何优雅的实现跨软件的拖拽功能
前端·github
海上生明月丿10 分钟前
Vue 工程化
前端·javascript·vue.js
李文旺40 分钟前
MVVM & compose
前端
李文旺43 分钟前
[React]受控组件与非受控组件
前端·react.js
香蕉可乐荷包蛋2 小时前
排序算法 (Sorting Algorithms)-JS示例
javascript·算法·排序算法