在 css flex 布局里，把图片和文字放在同一个 flex 容器中，经常会出现文字和图片上下对不齐的情况。这种问题大多和对齐属性以及图片默认表现有关，并不是 flex 本身有 bug。
为什么图片和文字会不对齐
flex 容器的默认 align-items 值是 stretch，子项会被拉伸填满交叉轴。但图片作为替换元素，通常不会被拉伸，而是按自身尺寸显示。同时，图片在行内上下文中底部会保留几像素空白，导致和旁边文字的基线对不上。
- 图片默认是 inline 元素，底部有空白间隙
- flex 子项未设置交叉轴对齐方式
- 文字有行高，图片没有，造成视觉偏差
使用 align-items center 解决对齐
最直接的方法是在 flex 容器上设置 align-items: center，让图片和文字在交叉轴方向居中对齐。这样无论文字行高多少，图片都会和文字中间对齐。
.container {
display: flex;
/* 让子项在交叉轴居中，解决图片文字不对齐 */
align-items: center;
gap: 8px;
}
.container img {
/* 去掉图片底部空白 */
display: block;
width: 24px;
height: 24px;
}
完整 html 示例
<div class="container"> <img src="https://ipipp.com/icon.png" alt="图标" /> <span>这是一段文字</span> </div>
其他需要注意的点
如果使用了 align-items: center 仍然不对齐，可以检查下面几项：
| 问题 | 处理方式 |
|---|---|
| 图片底部空白 | 设置 img 为 display: block 或 vertical-align: middle |
| 文字行高过大 | 适当调整 line-height 与图片高度一致 |
| 多个子项高度不同 | 统一用 align-items: center 而非 stretch |
小结
css flex 布局中图片和文字对不齐，核心是用 align-items: center 控制交叉轴对齐，并处理好图片的 inline 空白。掌握这两点，大部分对齐问题都能轻松解决。
cssflex布局align_items_center图片文字对齐前端布局修改时间：2026-07-24 23:48:16