图文默认不对齐是因 vertical-align: baseline 导致图片底部与文本基线对齐而下沉；Flexbox 通过 display: flex + align-items: center 可实现稳定垂直居中，配合 gap 和 flex-shrink: 0 提升响应性与兼容性。
图片和文字在行内默认不对齐，是因为它们的 vertical-align 默认值是 baseline（基线对齐），而图片作为替换元素，其底部会与文本基线对齐，导致视觉上“下沉”。用 Flexbox 是更现代、可控的解法。
给图文容器设为 flex 布局
把包裹图片和文字的父元素（比如一个 Flex 容器中， 如果文字多行或图片尺寸大，可能需微调间距或拉伸行为： 立即学习“前端免费学习笔记（深入）”； HTML 结构： CSS： 这样图文始终垂直居中，响应友好，也不依赖字体度量。）设为 flex 容器：
display: flex —— 启用 Flexboxflex-direction: row），适合图文并排控制垂直对齐：align-items
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 防止被压缩（尤其在窄屏下）一个实用小例子
这是说明文字
display: flex;
align-items: center;
gap: 12px;
}
.item img {
flex-shrink: 0;
width: 24px;
height: 24px;
}
