图文默认不对齐是因 vertical-align: baseline 导致图片底部与文本基线对齐而下沉；Flexbox 通过 display: flex + align-items: center 可实现稳定垂直居中，配合 gap 和 flex-shrink: 0 提升响应性与兼容性。
图片和文字在行内默认不对齐，是因为它们的 vertical-align 默认值是 baseline（基线对齐），而图片作为替换元素，其底部会与文本基线对齐，导致视觉上“下沉”。用 Flexbox 是更现代、可控的解法。
给图文容器设为 flex 布局
把包裹图片和文字的父元素（比如一个 <div> 或 <span>）设为 flex 容器：
- 添加
display: flex—— 启用 Flexbox - 默认主轴是水平方向（
flex-direction: row），适合图文并排 - 文字和图片自动成为 flex 项目，脱离传统行内对齐逻辑
控制垂直对齐：align-items
Flex 容器中，align-items 控制所有子项在交叉轴（这里是垂直方向）上的对齐方式：
-
align-items: center—— 最常用，让图片和文字垂直居中对齐 -
align-items: flex-start—— 顶部对齐 -
align-items: flex-end—— 底部对齐 - 避免用
baseline（Flexbox 中不推荐，语义弱且行为不稳定）
处理文字换行或高度不一致
如果文字多行或图片尺寸大，可能需微调间距或拉伸行为：
立即学习“前端免费学习笔记（深入）”；
- 加
align-items: flex-start+gap: 8px明确留白 - 若想文字撑高容器并垂直居中，可设
height或min-height，再配合align-items: center - 图片加
flex-shrink: 0防止被压缩（尤其在窄屏下）
一个实用小例子
HTML 结构：
<div class="item"><img src="icon.png" alt="图标">
<span>这是说明文字</span>
</div>
CSS：
.item {display: flex;
align-items: center;
gap: 12px;
}
.item img {
flex-shrink: 0;
width: 24px;
height: 24px;
}
这样图文始终垂直居中，响应友好，也不依赖字体度量。
