图片和文字在flex容器中baseline对齐失效，因图片默认inline受vertical-align影响；解决方法是设img为display: block，使其脱离baseline对齐，再由align-items: center按容器中心线对齐。
图片和文字在 flex 容器里 baseline 对齐失效
默认情况下，align-items: center 确实会让子元素沿交叉轴（垂直方向）居中，但如果你发现图片和文字视觉上还是“错位”，大概率是因为图片默认是 inline 元素，会受 vertical-align: baseline 影响，而文字的基线和图片底部对齐，导致文字看起来“被顶高了”。align-items: center 作用的是 flex 容器的交叉轴中心线，不是文字基线——两者不等价。
给图片加 display: block 是最直接的解法
只要把图片从 inline 变成块级，它就不再参与 baseline 对齐逻辑，此时 align-items: center 才能真正按容器中心线对齐图片和文字容器（比如 <span> 或 <p>）。
.container {
display: flex;
align-items: center;
}
.container img {
display: block;
}- 不用改 HTML 结构，纯 CSS 解决
- 避免使用
vertical-align: middle，它在 flex 中不可靠且行为不一致 - 如果图片外层套了
<a>或其他 inline 容器，也要确保那层没干扰（必要时加display: block或display: flex）
文字容器高度不一致也会破坏对齐效果
如果文字是多行、设置了 line-height、或父容器有 padding/margin，它的实际占位高度可能和图片高度不匹配，align-items: center 仍会居中，但视觉上像“偏了”。这时候要检查：
- 文字容器是否意外设置了
height或min-height -
font-size和line-height是否导致内容盒高度远大于文字本身 - 图片是否被
max-width: 100%或object-fit拉伸变形，从而改变了渲染高度
用 align-self 覆盖单个子项对齐方式
当只需要微调某一张图片或某一段文字时，比改全局 align-items 更安全。例如让文字“下沉一点”配合图标：
立即学习“前端免费学习笔记（深入）”；
.icon {
align-self: flex-end; /* 图标底对齐 */
}
.text {
align-self: center; /* 文字仍居中 */
}注意：align-self 只对 flex 子项生效，且会覆盖容器的 align-items 值。别在非 flex 子元素上写它，无效。
对齐问题往往卡在“以为对齐了，其实只是碰巧看起来差不多”。图片的 inline 特性、字体度量、以及 flex 的对齐基准线，三者混在一起时，光靠 align-items: center 很难一招制敌。动手前先用浏览器开发者工具选中元素，看它们的 border-box 是否真正在同一水平线上——这才是对齐的唯一真相。
