vertical-align仅对inline、inline-block、inline-table及table-cell元素生效；其对齐基准是行框基线而非父容器中心，middle指元素中点对齐baseline+x-height/2，非视觉居中。
vertical-align 只对内联元素和表格单元格生效
很多人给 div 或其他块级元素加 vertical-align: middle，发现完全没反应——不是写错了，是根本用错了地方。vertical-align 的作用域非常明确：它只影响 display 值为 inline、inline-block、inline-table 的元素，以及 table-cell（即 td / th）。
常见错误现象：img 下方有空白缝隙；span 和文字对不齐；给 div 设了 vertical-align 却毫无变化。
- 如果你要垂直居中一个块级容器（比如整个卡片），别想
vertical-align，该用flex或grid -
vertical-align的基准线不是父容器中心，而是“行框（line box）的基线”，这直接导致它的行为看起来很反直觉 - 当父容器没有显式设置
line-height时，浏览器会按默认字体大小推算，进而影响对齐位置
图片底部留白是因为它默认 align-baseline
img 是内联元素，默认 vertical-align: baseline，而基线对齐的是文本的底部（不是字体最底端，是字母如 “x” 的下沿），所以图片下方会空出一段留给 descender（比如 “g”、“y” 的下挂部分）。
这个缝隙不是 margin，不能靠 margin-bottom: -Xpx 精准消除，因为不同字体、字号下 descender 高度不同。
立即学习“前端免费学习笔记（深入）”；
- 最稳妥解法：
img { vertical-align: middle; }或top/bottom - 更彻底的方案：
img { display: block; }—— 一旦变成块级，vertical-align就失效了，自然也不再参与行内布局，缝隙消失 - 如果图是图标且用于按钮内，建议统一用
vertical-align: -0.125em这类微调值，比middle更贴合字体排版习惯
inline-block 元素间的换行符会被当空格处理
写 HTML 时如果把两个 display: inline-block 的 div 换行写，浏览器会把换行符和缩进当作一个空格字符渲染，造成约 4px 的水平间隙。这时候即使你给它们都设了 vertical-align: top，看起来也像没对齐——其实是被空格挤偏了。
这个空隙和 vertical-align 无关，但常被误认为是对齐失败。
- 解决方法一：HTML 中删掉元素间的换行与空格（不推荐，可读性差）
- 解决方法二：父容器设
font-size: 0，子元素再单独设字体大小（注意继承问题） - 解决方法三：用
margin-left: -4px负边距抵消（脆弱，字号变就失效） - 现代替代方案：直接用
display: flex，从根源上绕过内联布局的这些毛刺
vertical-align 的 middle 不是“容器中间”
vertical-align: middle 的实际含义是：把元素的**中点**对齐到父元素 **baseline + x-height / 2** 的位置。x-height 是小写字母 “x” 的高度，由当前字体决定，不是固定值。
这意味着：同一段代码，在不同字体或 font-size 下，middle 对齐的位置可能明显偏移。
- 不要依赖
middle做精确视觉居中，尤其在混合字体或动态字号场景下 - 若需稳定居中，优先用
vertical-align: top+ 手动计算padding-top，或改用flex的align-items: center -
vertical-align: text-top和text-bottom相对更可靠，它们锚定的是父文本的 top/bottom 边缘，不受 x-height 干扰
真正难的不是记住取值，而是意识到 vertical-align 从来不是为“居中”设计的，它是为排版服务的——而网页里大多数所谓“居中需求”，其实早该交给更现代的布局机制来处理。
