vertical-align: middle 经常失效是因为它仅对 inline 或 inline-block 元素生效，而现代布局中父容器多为 flex 或 grid，此时该属性被忽略；图文对齐应按场景选择 vertical-align（inline）或 flex 的 align-items（flex/grid）。
vertical-align: middle 为什么经常失效
它只对 inline 或 inline-block 元素生效，而现代项目里父容器大概率是 display: flex 或 display: grid——这时 vertical-align 直接被忽略，不是你写错了，是它根本没机会运行。
常见错误现象：img { vertical-align: middle; } 加了但文字还是“吊着”，图片下方有白缝；或者换了个字体、改了 line-height，对齐又偏了。
- 确认
img父元素没设display: flex/display: grid，否则别浪费时间调vertical-align -
vertical-align: middle对齐的是行框中点，不是文字基线，所以当文字字号小、行高大时，视觉上仍可能偏高 - 微调可用具体值，比如
vertical-align: -2px或vertical-align: text-top，比猜middle更可控
flex 布局下图文并排居中必须配齐三要素
缺一不可：父容器 display: flex、justify-content: center（水平）、align-items: center（垂直）——漏掉 align-items 就只剩水平居中；漏掉高度定义，垂直方向就“没地方可居中”。
错误写法：.wrap { display: flex; justify-content: center; } → 文字和图片水平居中了，但垂直方向贴顶。
立即学习“前端免费学习笔记（深入）”；
- 给父容器加
height或min-height，例如min-height: 100vh或固定值height: 200px - 图文混排时，建议把
img和文字包进同一个子容器（如<div class="content">），再对这个子容器 flex 居中，避免img和span被当成两个独立 item 错位 - 用
gap控制间距，比给img加margin-right更干净；但注意 IE 不支持，需兼容旧版时退回到margin+:last-child清除
图片底部对齐文字的两种可靠路径
目标是让图片底边和文字底边严格平齐，尤其在导航栏、按钮内嵌图标等场景。别碰 margin-bottom: -4px 这类 magic number，换字体或缩放立刻错位。
- 纯 inline 场景（如段落中插小图标）：
img { vertical-align: bottom; }—— 它跳过 baseline 计算，直接贴行框底边，IE8+ 全支持 - flex 容器中（如
nav里 logo + 文字）：.nav { display: flex; align-items: flex-end; }—— 注意是align-items（交叉轴），不是align-self；如果主轴是横向，交叉轴就是竖向，flex-end才会让内容沉到底部 - 单图+单行文字紧贴父容器底边：
img { display: block; margin-top: auto; }+ 父容器display: flex; flex-direction: column;—— 利用 flex 的自动 margin 分配，比绝对定位更健壮
响应式下图文对齐容易被忽略的三个细节
自适应布局不是只调 width: 100% 就完事，对齐效果会在断点间突然崩塌，问题往往藏在底层行为里。
-
img默认display: inline，小屏下若父容器宽度剧烈收缩，它可能被挤到下一行，破坏并排——加white-space: nowrap在父容器上可锁住一行 -
max-width: 100%必须配合父容器有明确宽度来源（如width: 100%或flex: 1），否则无效；flex 项还需额外加min-width: 0才能让max-width生效 - 图片加载慢时，flex 容器可能先按 0 高度渲染，导致文字上移——给
img设aspect-ratio: 16/9或固定width/height预留空间，比靠 JS 补救更稳
display 类型，再决定走 vertical-align 还是 flex 路线；同一段 CSS 在 div 里有效，在 header 或 nav 里失效，大概率是继承了别的 display 值。 
