图片与文字在flex容器中垂直对齐不齐的根本原因是img默认基线对齐，解决方法是设父容器display: flex并用align-items控制对齐，同时固定图片尺寸或使用aspect-ratio防高度波动，多行文字需结合flex-direction: column与justify-content或margin-top: auto处理，兼容性问题可通过前缀或grid降级。
图片和文字在 flex 容器里垂直对齐不上
常见现象是 img 和旁边 span 或 p 文字底部参差不齐，尤其在小屏幕下更明显。根本原因是图片默认为 inline 元素，基线（baseline）对齐，而文字的基线位置受字体、行高影响，不是容器中线。
解决核心是切断基线对齐依赖，改用 flex 的对齐能力：
- 给父容器加
display: flex，并确保子元素没意外设置vertical-align - 用
align-items: center实现垂直居中（适用于单行文字+单图） - 若需顶部或底部对齐，改用
align-items: flex-start或align-items: flex-end - 注意：如果文字换行了，
align-items: center会让整段文字块垂直居中，而非首行对齐——这时应考虑align-self单独控制某一项
响应式断点下图片缩放导致文字错位
当用 max-width: 100% + height: auto 做响应式图片时，宽高比变化可能让容器高度波动，flex 的 align-items 会随之“漂移”。这不是对齐失效，而是参考高度变了。
稳妥做法是固定容器最小高度或使用 aspect-ratio：
立即学习“前端免费学习笔记（深入）”；
- 给图片父容器设
min-height（如min-height: 48px），防止收缩过度 - CSS 新标准可用
aspect-ratio: 16/9锁定比例，兼容性需查caniuse aspect-ratio - 避免对
img直接设固定height，否则会拉伸变形；宁可配合object-fit: cover裁剪
文字多行时与图片顶部对齐但末行悬空
这是 align-items: flex-start 的典型表现：它对齐的是 flex 项的“主轴起点”，对多行文字来说就是第一行顶部，但末行底部可能远低于图片底边，视觉上像“没对齐”。
真实需求往往是“文字顶部与图片顶部平齐，且文字最后一行底端尽量靠近图片底端”。这时靠 flex 单一属性不够，要组合处理：
- 给文字容器加
display: flex; flex-direction: column; justify-content: space-between，再嵌套一行span和一个空div占位 - 更轻量的做法：用
margin-top: auto推文字到底部对齐（需文字容器为 flex 子项且设flex-direction: column） - 慎用
line-height硬调——它依赖字体渲染细节，在不同系统/浏览器下表现不一致
.text-container {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
.text-container span {
margin: 0;
}
.text-container::after {
content: '';
flex: 1;
}
Flex 对齐在老版 Safari 或 IE 中失效
IE10–11 对 align-items 支持有 bug，特别是和 flex-wrap: wrap 混用时；旧 Safari（iOS 9–12）对 align-self 行为不一致。
兜底策略不是降级回 float，而是用更保守的 flex 写法：
- 避免在 flex 容器上同时设
flex-wrap和align-items，改用align-content控制多行对齐 - 对 IE，加前缀
-ms-flex-align: center和-webkit-align-items: center - 真正兼容性要求高的场景，用
display: grid替代（align-items在 Grid 中更稳定），但注意 Grid 在 iOS 9 以下不可用
height: auto 或文字外层多了一层未重置的 margin。 
