### [表格里的 valign 为什么没用了](https://www.huociguo.com/article/1697)

**Published:** 2026-10-02T09:37:55

**Author:** 米了

**Excerpt:** 给表格单元格写 ，在现代页面里没有任何效果。这个属性从 HTML5 起已被废弃，规范不再要求浏览器支持。废弃属…

给表格单元格写 `valign='middle'`，在现代页面里没有任何效果。这个属性从 HTML5 起已被废弃，规范不再要求浏览器支持。

![显示器上运行的程序画面](https://api.huociguo.com/wp-content/uploads/2026/10/pexels-photo-6424585.jpeg)

废弃属性的生效与否不再受规范保证

## 新旧写法对照

| 旧写法 | 新写法 |
| --- | --- |
| valign=’top’ | vertical-align: top |
| valign=’middle’ | vertical-align: middle |
| valign=’bottom’ | vertical-align: bottom |
| align=’center’ | text-align: center |

旧属性写在元素上，新写法写在样式表里。单元格内部的文字垂直对齐，用 CSS 的 vertical-align 承载。

## 为什么有时看起来还有效

部分浏览器对历史页面保持宽松解析，旧属性在怪异模式下仍被识别。页面进入标准模式后行为不一致，同一份代码在不同浏览器里表现不同。

## 单元格整体居中

```
td { vertical-align: middle; }
.cell-wrap { display: flex; align-items: center; }
```

只调整文字与行高的关系时，第一条就够。单元格内部是复合内容时，在内容外层套一个 flex 容器，按交叉轴对齐。

## 迁移清单

1.  全局搜索 valign 与 align 属性，逐个确认作用对象。
2.  把取值映射到 vertical-align 或 text-align。
3.  确认页面处于标准模式，文档头部声明了文档类型。
4.  在各浏览器里抽查竖直方向的表现。

**Tags:** vertical-align, 垂直对齐, 废弃属性, 表格单元格, 表格对齐

**Categories:** HTML5

---