align-items: baseline 对文字+图片无效，因 img 默认为行内替换元素，其基线位置与文字不同且 Flex 中 vertical-align 被忽略；推荐用 align-items: center + line-height 与图片高度一致实现稳定对齐。
flex-align-items-baseline 为什么对文字+图片没用
因为 align-items: baseline 在 Flex 容器中，基线对齐只对「块级子元素」生效，而 <img alt="CSS如何利用Flex处理文字对齐图片基线的问题" > 默认是 inline 元素，浏览器会把它当成“行内替换元素”处理，它的基线定义和文字不同（通常在底边下方约 25% 处），导致视觉上明显错位。
常见错误现象：align-items: baseline 下，文字底部和图片底边不齐，文字看起来“吊着”或“下沉”；用 vertical-align: baseline 单独设在 <img alt="CSS如何利用Flex处理文字对齐图片基线的问题" > 上也无效——它只在 inline-level 环境里起作用，Flex 里被忽略。
- 必须把图片显式设为
display: block或display: inline-block才能参与 Flex 的基线计算（但即使这样，align-items: baseline对<img alt="CSS如何利用Flex处理文字对齐图片基线的问题" >仍不可靠） - 更稳妥的做法是放弃
baseline，改用align-items: center+ 调整文字line-height或图片margin-top - 如果真要模拟基线对齐，得手动算：图片底边到其内容基线的距离 ≈
0.25 * height，再用margin-bottom: -0.25em拉文字，但响应式下会失效
用 align-items: center + line-height 精确对齐文字和图片
这是最稳定、兼容性最好（IE10+）、代码最少的方案。核心逻辑是：让文字行框高度和图片高度一致，再居中对齐。
使用场景：按钮里带图标和文字、列表项左侧图标+右侧说明文字、表单控件旁的提示图标等。
立即学习“前端免费学习笔记（深入）”；
-
display: flex容器设align-items: center - 图片保持默认
display: inline或显式设display: block（避免换行干扰） - 文字容器（如
<span></span>）设line-height等于图片高度（单位用px或em，避免继承干扰） - 若图片尺寸动态（比如用
max-width: 100%），优先用height: 1em配合font-size控制，让文字和图片尺寸联动
示例：
.icon-text {
display: flex;
align-items: center;
}
.icon-text img {
height: 1.2em;
margin-right: 0.4em;
}
.icon-text span {
line-height: 1.2em;
}图片用 vertical-align: middle 时为什么 flex 容器里不生效
因为 vertical-align 是 CSS2 行内布局属性，只在 display: inline、inline-block、table-cell 等上下文中有效；Flex 子项一旦进入 Flex 格式化上下文，vertical-align 就被完全忽略——浏览器连解析都不解析它。
常见错误现象：给 <img alt="CSS如何利用Flex处理文字对齐图片基线的问题" > 写了 vertical-align: middle，但在 display: flex 父容器里毫无反应；检查 computed styles 会发现该属性值显示为 normal（已被重置）。
- 别试图在 Flex 里混用
vertical-align和align-items，它们属于两套互斥的布局机制 - 如果父容器必须是 Flex，又想保留
vertical-align的语义，唯一办法是把图片和文字包进一个display: inline-block的 wrapper 里，再把这个 wrapper 当作 Flex 子项——但多一层 DOM，且失去 Flex 的弹性优势 - 现代项目中，直接用
align-items: center+height/line-height组合，比绕路兼容vertical-align更轻量、可控
响应式下图片尺寸变化时，如何避免文字对齐偏移
关键不是“锁死尺寸”，而是让文字行高和图片高度始终同比例缩放。硬写 px 值在媒体查询里维护成本高，容易漏掉断点。
性能与兼容性影响：用 em 或 rem 代替 px 不影响渲染性能，且 IE9+ 全支持；但要注意 em 是相对于父字体大小，若父级 font-size 动态变化（如用 clamp()），需确保图片 height 和文字 line-height 同步响应。
- 统一用
em：图片设height: 1.2em，文字设line-height: 1.2em，两者自然同步 - 若用
rem，需保证根字体大小稳定（比如禁用用户缩放时的强制重设） - 避免对图片用
max-width: 100%同时又设固定height，会导致拉伸变形；应设height: auto+max-height，再用line-height匹配最大可能高度
真正难的是设计系统里多个组件共用同一套对齐逻辑——这时候得把 1.2em 抽成 CSS 变量，比如 --icon-size: 1.2em，然后图片和文字都引用它。
