vertical-align 只对表格单元格（、）或 display: table-cell 元素生效，设在 或 上无效；必须作用于每个单元格，且需注意行高、line-height、混合内容及 css 优先级影响。

vertical-align 为什么在 上设才有效

因为 vertical-align 只对表格单元格（<td>、<code><th>）或 <code>display: table-cell 元素生效，直接写在 <tr> 或 <code><table> 上完全无效——浏览器会忽略它。 <p>常见错误是给整行加 <code>style="vertical-align: middle"，结果毫无反应。必须作用到每个单元格上，哪怕只是视觉上“整行居中”，也要确保该行所有 <td> 和 <code><th> 都显式设置了相同值。 <ul> <li>✅ 正确：<code><td style="vertical-align: middle">内容</td>

❌ 无效：<tr style="vertical-align: middle"><td>内容</td></tr>

⚠️ 注意：如果某列内容撑高了单元格（比如多行文本），其他列即使设了 middle，也会因高度不一致而“看起来没居中”——这是正常渲染行为，不是 bug

middle 不等于“绝对居中”，它依赖 line-height 和字体尺寸

vertical-align: middle 在表格单元格里确实会让内容垂直居中，但它的计算逻辑是：元素中点对齐单元格的“基线 + x-height / 2”。这意味着：

• 当单元格高度由内容撑开时，middle 行为稳定可靠
• 当单元格高度固定（如 height: 40px），但未设置 line-height，文字可能被压扁或偏移
• 若单元格内含图片+文字混合，且图片未设 vertical-align，图片默认 baseline 会拖低整体视觉重心

实操建议：

• 固定高单元格中，搭配 line-height: 40px 使用 vertical-align: middle 更稳
• 图片混排时，统一加 img { vertical-align: middle; }
• 避免用 vertical-align: middle 配合 font-size: 0 或极端缩放，会导致计算失准

top / bottom 对齐容易被撑高单元格“吃掉”效果

设 vertical-align: top 后，内容顶着单元格上边沿，但若同一行中某列内容特别高（比如三行文本），其他列即使设了 top，也会被拉高——这不是失效，而是表格行高由最高单元格决定。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

此时你看到的“没顶齐”，其实是视觉错觉：所有单元格上边沿确实对齐了，但因行高被拉高，下方留白变多。

• 要真正让内容贴近表格顶部，需控制整行高度：给 <tr> 加 <code>height（不推荐）或用 min-height + vertical-align: top 组合
• 更稳妥的做法是放弃表格行高控制，改用 padding-top: 0 + vertical-align: top 压缩顶部空间
• 如果目标是“整行贴顶”，vertical-align 不是工具，该用 flex 容器包裹表格或重构为 grid

兼容性和 !important 的真实使用场景

现代浏览器对 vertical-align 支持极好，问题通常出在 CSS 优先级冲突，尤其是引入 Bootstrap、Ant Design 等框架后，它们的 td 样式可能带高 specificity 或 !important，导致你的规则被覆盖。

• 先用浏览器开发者工具检查 computed styles，确认是否被覆盖
• 仅当确认是优先级问题时，才加 !important：vertical-align: middle !important;
• 不要一上来就全局写 td { vertical-align: middle !important; }——这会破坏框架原有设计意图，后续维护成本陡增
• 更可持续的解法是提高选择器 specificity，比如用 .my-table td 替代 td

真正难的不是写出 vertical-align: middle，而是判断它到底有没有生效、为什么没生效、以及该不该让它生效。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！