vertical-align: middle 仅对 或 生效，因它只作用于行内盒；单元格需足够高度（用 padding 而非 height）、避免嵌套块级元素，否则须改用 flex 布局。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

vertical-align: middle 必须作用在 <td> 或 <code><th> 上才有效，写在 <code><table> 或 <code><tr> 上完全没反应。 <h3>为什么 <code>vertical-align: middle 看似不生效

不是属性写错了，而是它对齐的“参考高度”被忽略了：

• <td> 没有显式高度，又只有一行短文本时，内容撑开的高度太小，<code>middle 和默认 baseline 视觉上几乎一样
• 单元格里嵌套了 <div>、<code><p></p> 等块级元素 —— vertical-align 对它们无效，只管单元格自身的“行内盒”
• 加了 line-height: 1 但没同步调高容器高度，导致文字被压扁，居中感消失
• 用了 border-collapse: collapse，边框重叠后视觉边界模糊，误判单元格实际范围

纯文本场景：用 text-align + vertical-align 组合

这是最轻量、兼容性最好的方案，适用于大多数传统表格：

• 必须同时设置：text-align: center（水平） + vertical-align: middle（垂直）
• 样式目标只能是 <td> 或 <code><th>，不能是 <code><tr> 或 <code><table> <li>避免设 <code>height，改用 padding: 8px 12px 提供稳定对齐空间，更健壮
• 整表统一控制？写成：table td, table th { text-align: center; vertical-align: middle; }

含图片/按钮/多行内容：改用 display: flex

当 <td> 里塞了 <code><img alt="HTML表格内文本域垂直居中的实现教程" >、<button></button> 或多个 <p></p>，vertical-align 就力不从心了：

立即学习“前端免费学习笔记（深入）”；

• 给 <td> 加 <code>display: flex; align-items: center; justify-content: center;
• 不需要固定 height，用 min-height: 40px 更安全，适配响应式
• 注意清除子元素默认 margin（比如 <p></p> 的上下边距），否则会撑开错位
• Moodle 等受限环境也支持该写法，只要内联 style 可用（Chrome 29+/Firefox 20+ 均兼容）

别再用 valign="middle"

这个 HTML 属性已被 HTML5 废弃，现代项目中应彻底禁用：

• 它无法继承、无法复用，每个单元格都得手写一遍
• React/Vue 等框架可能直接过滤掉该属性，样式丢失且无提示
• 一旦父容器用了 display: flex 或 grid，valign 立即失效
• 正确替代方案只有 CSS 的 vertical-align: middle，或升级为 Flex/Grid 布局

真正容易被忽略的是：垂直居中效果是否“可见”，取决于单元格是否有足够可用高度空间——不是靠硬设 height，而是靠 padding 或内容自然撑开；一旦里面嵌了块级元素，vertical-align 就自动退场，这时候必须切到 Flex 模式，没有中间路线。