不能用了,valign是HTML4废弃属性,HTML5已完全移除;现代浏览器仅靠容错机制可能偶然渲染,但行为不可控、不保证兼容性,应改用CSS的vertical-align(仅对td/th有效)或flex布局。

valign 属性还能用吗?浏览器兼容性现状
不能用了,valign 是 HTML 4 的废弃属性,在 HTML5 中已完全移除。现代浏览器虽大多仍能解析 valign(尤其在 <td> 或 <tr> 上),但属于“尽力而为”的兼容行为,不保证一致——比如 Firefox 在 strict mode 下可能忽略它,Chrome 某些版本对 valign="middle" 渲染偏高。别依赖它,也别在新项目里写。
用 CSS 实现单元格垂直居中:最可靠写法
必须用 vertical-align + 正确的 display 上下文。关键点在于:vertical-align 只对 inline、inline-block、table-cell 元素生效,而 <td> 默认就是 display: table-cell,所以直接设就行:
td {
vertical-align: middle;
}
常见错误是给 <tr> 或整个 <table> 设 vertical-align——无效,因为它们不是 inline 级元素。也不要用 align-items,除非你把 <td> 改成 display: flex,但这会破坏表格语义和可访问性。
多行文本或嵌套内容时,vertical-align 为啥没反应?
vertical-align 对齐的是行框(line box)的基线,不是容器的物理中心。当单元格里有换行、<div>、<p> 等块级子元素时,它只对第一行文本起作用,其余内容会“塌陷”到顶部。
立即学习“前端免费学习笔记(深入)”;
- 解决办法一:把子元素设为
display: inline-block,再配合vertical-align: middle - 解决办法二:给
<td>加height和line-height(仅限单行纯文本) - 解决办法三(推荐):用
display: flex+align-items: center,但仅限于你确认该单元格无需屏幕阅读器正确识别为表格数据的场景
表格整体高度不固定时,怎么让所有单元格垂直居中?
如果 <table> 没设固定高度,vertical-align: middle 依然有效——它基于单元格自身内容撑开后的高度计算对齐位置。但要注意:
- 空单元格(只有空格或 )可能高度为 0,导致对齐失效;加
min-height或padding可缓解 - 合并单元格(
rowspan/colspan)不影响vertical-align行为,但视觉上容易误判对齐基准 - 用
table-layout: fixed时,单元格高度由内容决定,vertical-align依然按实际高度对齐,不是按预设列宽
真正难处理的是跨多行的复杂布局,这时候与其硬调表格对齐,不如考虑用 CSS Grid 替代部分表格结构——表格语义不该为视觉妥协太多。



















