图片和文字垂直对齐不生效，主因是父容器未设置 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;
}- 如果父容器是
<div>、<span>或其他非块级/内联默认行为的元素，必须显式声明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到<img>标签本身，配合非-flex 布局（但不如 flex 稳定） - 不要依赖
line-height去“凑”对齐——它只对内联内容有效，且在多行文字下会破坏行距
flex 容器里文字换行或溢出怎么办？加 flex-wrap 和 min-width 控制
当文字较长或容器窄时，display: flex 默认不换行，可能导致文字被压缩、图片被挤出视区，或整行溢出。
- 加
flex-wrap: wrap允许子项折行，但注意：这会让图片和文字分两行，失去“同行对齐”效果 - 更稳妥的是限制文字区域：给文字包裹一层
<span>或<div>，设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>可能失效，可补一句img { vertical-align: middle; } - 避免在 IE 中对 flex 容器设
width: fit-content或max-content，它们不受支持
真正卡住的时候，往往不是 align-items 写错了，而是父容器没变成 flex 容器，或者图片自带上下空白（比如 PNG 透明边），又或者文字用了不一致的 font-family 导致行高计算异常。先查 computed styles 里的 actual height 和 baseline 位置，比猜更快。
