vertical-align仅作用于行内级盒子（如inline、inline-block、img等），对块级元素无效；其对齐基准是动态行框和字体度量，非绝对居中，图文错位或middle不居中均属规范行为。
vertical-align 不是“影响”行内盒模型的对齐，而是它唯一生效的场景——只作用于行内级盒子（inline-level boxes），包括 inline、inline-block、inline-table 和替换元素（如 <img>、<input>、<svg></svg>）。 对块级元素设 vertical-align 完全无效，这是最常被误用的第一步。
为什么 vertical-align: baseline 总是让图片和文字看起来“错位”？
这不是 bug，是规范行为：所有 inline-block 元素默认按基线（baseline）对齐，但不同元素的 baseline 位置根本不同。
-
<img>的 baseline 在图片底边向上约 4px 处（为 descender 预留空间），不是底边本身 - 含文字的
<button></button>基线由内部文本的 font-size 和字体度量决定 - 空
<button></button>可能 fallback 到 margin-bottom 边缘，baseline 漂移更明显 - 结果就是：它们的 baseline 不在一条线上，浏览器老老实实对齐后，视觉上就“一高一低”
vertical-align: middle 为什么经常不居中？
vertical-align: middle 并不是把元素垂直居中于父容器，而是将该元素自身的中点，对齐到父行框（line box）中 text-top 与 text-bottom 的中点——这个参考点高度依赖 font-size、line-height 和当前字体的 ascender/descender。
- 响应式缩放时，
font-size改变 → x-height 中点位置漂移 → 图标“突然偏高” - 父容器没设
line-height，用浏览器默认值（如 1.2）→ 该值随font-size缩放 → middle 实际锚点浮动 - 一行里混用不同字号的文字（如标题 + 副文本）→ 基线不一致 →
vertical-align只能按整行统一参考，无法逐个校准
什么值真正可靠？什么时候该换方案？
对图文并排、按钮图标、表单控件这类常见场景，vertical-align: text-bottom 或 vertical-align: top 是最稳的选择。
-
text-bottom把元素底边直接对齐到父元素font-size所定义的 em-box 底边，完全绕开基线和中点计算 → 示例：img, svg, input[type="button"] { vertical-align: text-bottom; } -
top直接对齐到行框顶部，不依赖任何字体度量 → 适合多行文字旁的图标顶端齐平 - 目标是让子元素在父容器中垂直居中 → 改用
display: flex+align-items: center，别硬套vertical-align - 需要多列卡片网格对齐 → 改用
display: grid+place-items: center
真正容易被忽略的是：vertical-align 的锚点始终绑定在“当前行框”，而行框高度会随内容、换行、字体、字号动态变化。你调的不是绝对位置，是在跟一个浮动的参照系博弈。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
