图片默认 inline 触发基线对齐，干扰 align-items: center 效果；解决方法是设 img 为 display: block 或统一子元素为 flex 项目并显式控制对齐。
flex布局中图片与文字垂直居中对齐失效的常见原因
直接给 display: flex 容器加 align-items: center 却没效果？大概率是图片默认为 inline 元素，会触发基线对齐（baseline alignment），导致视觉上“卡在底部”。文字和图片的基线位置不一致，align-items: center 实际是对齐容器的交叉轴中心，但基线干扰让结果不可控。
解决思路很明确：切断基线影响。最稳妥的做法是把图片设为 display: block，或者统一所有子元素为 flex 项目并显式控制对齐方式。
-
img标签默认是display: inline，哪怕父容器是flex，它仍保留内联特性，参与基线计算 - 只靠
align-items: center不足以覆盖基线行为，尤其当文字有多行或字体大小不一致时 - 不要依赖
vertical-align修复——它在 flex 容器中被忽略（规范明确废弃）
卡片内图文并排 + 垂直居中的一键写法
典型场景：一张图 + 一段标题+描述，左右排列且整体内容块在卡片内垂直居中。关键在于两层 flex：外层控制卡片高度方向居中，内层控制图文横向对齐与内部垂直对齐。
.card {
display: flex;
align-items: center; /* 外层：整个内容块在卡片中垂直居中 */
min-height: 200px;
}
<p>.card-content {
display: flex;
align-items: center; /<em> 内层：确保图片和文字本身也垂直对齐 </em>/
gap: 16px;
}</p><p>.card-content img {
display: block; /<em> 必须！消除基线对齐干扰 </em>/
width: 80px;
height: 80px;
object-fit: cover;
}</p><p>.card-text h3,
.card-text p {
margin: 0;
}</p>注意：gap 比 margin 更可靠，不会因 margin 合并或父子塌陷出问题；object-fit: cover 防止图片拉伸变形，比单纯设宽高更健壮。
立即学习“前端免费学习笔记（深入）”；
多行文字 + 图片顶部对齐时 flex 的陷阱
如果需求是“图片顶部对齐，文字左对齐、顶部贴齐”，别用 align-items: flex-start 然后指望文字自动撑开——文字若换行，其第一行顶部虽对齐了，但整体 line-height 和 font-size 差异会让视觉错位。
- 图片设
align-self: flex-start可单独控制，但文字容器需包裹一层div并设display: flex; flex-direction: column - 避免对文字直接设
margin-top补偿——响应式下会失效 - 真正稳定的方式是：让文字容器也作为 flex 项目，并用
justify-content: flex-start+align-items: flex-start锁定起始点
换句话说，图文各自独立成为 flex 子项，而不是把文字当普通流内内容去“调位置”。
IE11 下 flex 图文对齐的兼容性补救
IE11 对 align-items 在某些嵌套场景下有渲染 bug，尤其是图片带 max-width 或父容器有 padding 时。不是所有 flex 属性都失效，但 align-items: center 容易偏移几个像素。
可行的降级策略：
- 给图片加
vertical-align: middle（仅对 IE11 有效，现代浏览器忽略） - 用
display: table-cell+vertical-align: middle包裹图文区，仅 IE11 下启用（通过@supports not (display: flex)或 class 切换） - 放弃绝对居中，改用
padding-top模拟，配合 JS 动态计算（仅极端必要时）
真实项目里，只要图片设了 display: block，IE11 中 align-items: center 多数情况可用——但一旦出现微小偏移，优先检查是否漏掉了这一条。
