vertical-align: baseline在表格中可用但非默认且易错位——td默认middle对齐，baseline依赖第一行文本基线，受字体降部、line-height等影响，仅适用于纯文本嵌入段落、表单控件对齐或PDF导出等特定场景。
vertical-align: baseline 在表格中能用，但多数时候不是你真正想要的对齐方式——它不等于“文字底部对齐”，也不保证视觉居中，反而容易让内容错位或产生意外空白。
为什么 vertical-align: baseline 在表格里表现反直觉
表格单元格（<td>）默认是 vertical-align: middle，不是 baseline。当你显式写 vertical-align: baseline，浏览器会尝试将单元格内“第一行文本的基线”作为锚点，但这个基线位置受字体降部（如字母 g、y）、line-height、甚至是否含表单控件影响极大。
常见错误现象：
- 纯文字单元格加了
baseline后，看起来像“下沉”了一截 -
<img>和文字混排时，图片底边和文字基线对齐，但因图片基线被定义为其底边，实际效果接近bottom，而非“底部贴齐” - 同一行不同字号的文字，
baseline对齐后顶部/底部参差不齐
vertical-align: baseline 真正适用的几个场景
它不是“通用垂直对齐方案”，而是为特定上下文设计的微调手段：
立即学习“前端免费学习笔记（深入）”；
- 单元格内只有纯文本（无换行、无图片、无
<input>），且需与外部段落中的行内元素保持基线一致（例如嵌入在<p>里的小表格） - 单元格内含
<input type="text">或<select>时，baseline反而比middle更自然——因为这些表单控件默认就是基线对齐 - 导出 PDF 或打印样式中，为规避不同渲染引擎对
middle的计算差异，统一用baseline强制对齐逻辑
替代方案：什么时候该用 middle、top 或 bottom
绝大多数表格内容对齐需求，vertical-align: middle 才是合理起点：
- 想让文字、图片、按钮在单元格内视觉居中 → 用
middle，并确保单元格有明确高度（否则撑开后middle效果弱） - 多行文本+图标混排，又希望顶部对齐 → 用
top，避免基线浮动带来的错位 - 固定高度单元格中展示状态标签（如“已处理”“待审核”），需底部锚定 → 用
bottom比baseline更可控 - 不要对
<img>单独设vertical-align；应统一设在<td>上，否则周围无其他行内元素时行为不可预测
容易被忽略的关键细节
基线对齐不是像素级精确控制，它依赖字体度量和行盒计算。哪怕同一段 HTML，在 Chrome 和 Safari 中因字体回退策略不同，baseline 位置也可能偏移 1–2px。如果你正在做高保真 UI 或跨平台导出，别只靠 baseline 做最终对齐依据——配合 height + line-height + padding 组合微调，往往比单靠一个 vertical-align 更可靠。
