图片和文字垂直对齐不生效，主因是父容器未设置 display: flex；需先声明 display: flex，再用 align-items: center 才有效，否则该属性无效。
图片和文字垂直对齐不生效？检查父容器是否设了 display: flex
直接写 align-items: center 没反应，大概率是忘了给父元素加 display: flex。Flex 的对齐属性只在 flex 容器上起作用，文字和图片本身不是 flex 项目，不会自动受控。
常见错误写法：
.container {
align-items: center; /* ❌ 没有 display: flex，这行无效 */
}正确写法：
.container {
display: flex;
align-items: center;
}- 如果父容器是 、
或其他非块级/内联默认行为的元素，必须显式声明display: flex- 避免用
inline-flex包裹文字+图片——它会让整个容器变成内联尺寸，可能意外截断换行或撑不开宽度- 若父容器已有其它布局（如
float或grid），display: flex会覆盖原有行为，需确认是否符合预期文字和图片高度不一致导致视觉偏移？试试 align-items: baseline 或使用 line-height
align-items: center是按 flex 项目的内容框（content box）中点对齐，但图片默认是vertical-align: baseline，而文字有 descender（如 g、y 下延部分），所以即使用了 flex，也可能看起来“没对齐”。立即学习“前端免费学习笔记（深入）”；
- 优先用
align-items: center+display: flex，这是最可靠的方式；视觉偏差通常来自图片外边距、字体行高或图片自身透明像素 - 如果图是图标类小图（比如 16×16），可加
vertical-align: middle到 - 不要依赖
line-height去“凑”对齐——它只对内联内容有效，且在多行文字下会破坏行距
flex 容器里文字换行或溢出怎么办？加 flex-wrap 和 min-width 控制
当文字较长或容器窄时，
display: flex默认不换行，可能导致文字被压缩、图片被挤出视区，或整行溢出。- 加
flex-wrap: wrap允许子项折行，但注意：这会让图片和文字分两行，失去“同行对齐”效果 - 更稳妥的是限制文字区域：给文字包裹一层
或，设min-width: 0+overflow: hidden+text-overflow: ellipsis- 图片别忘设
flex-shrink: 0，否则小屏下会被 flex 压缩变形.container { display: flex; align-items: center; gap: 8px; /* 替代 margin，更可控 */ } .container img { flex-shrink: 0; height: 24px; width: 24px; } .container .text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }兼容老浏览器（IE10/11）？避免使用 gap 和 align-items: center 的组合写法
IE10/11 支持
display: flex和align-items: center，但不支持gap，也不支持align-items在某些嵌套 flex 场景下的继承行为。- 用
margin替代gap：给图片加margin-right: 8px，或给文字加margin-left: 8px - IE 下
align-items: center对img { vertical-align: middle; } - 避免在 IE 中对 flex 容器设
width: fit-content或max-content，它们不受支持
真正卡住的时候，往往不是
align-items写错了，而是父容器没变成 flex 容器，或者图片自带上下空白（比如 PNG 透明边），又或者文字用了不一致的font-family导致行高计算异常。先查 computed styles 里的 actual height 和 baseline 位置，比猜更快。 - 图片别忘设
- 避免用
