跳转到主内容
极星编程网：以代码为星，赴技术山海！
📁 网站地图

HTML table的valign属性替代？CSS vertical-align用法

苏承栈
苏承栈
• 👁 0人浏览过
valign属性在现代浏览器中已失效，HTML5规范废弃该属性，浏览器仅靠容错机制默认按vertical-align: middle渲染；真正可靠的是CSS的vertical-align（仅对td/th有效）或flex布局。 valign 属性在现代浏览器里到底还管不管用 不管用，但你可能没察觉——浏览器只是把它当无效属性忽略，然后按默认
vertical-align: middle
渲染。这不是它生效了，而是你撞上了浏览器的容错兜底行为。一旦表格单元格被任何 CSS 覆盖（比如写了
td { vertical-align: top; }
或父级用了
display: flex
），
valign
就彻底失联。
valign
是 HTML4 的遗留属性，HTML5 规范已明确废弃，连 validator 都会报 warning 它写在
上时，实际是批量作用于该行所有
，但这个“批量”在 CSS 时代毫无意义，且无法被选择器覆盖 ASP.NET Web Forms 的
HtmlTableRow.VAlign
仍能输出
valign
，但生成的 HTML 已不符合现代标准，建议直接弃用 vertical-align 写在哪才真正起作用 只写在
或
上才可靠；写在
或
上完全无效。因为
vertical-align
的作用机制依赖元素的 display 类型——它只对
display: table-cell
（即原生单元格）、
inline
、
inline-block
生效。 别写：
→ 没效果 要写：
或统一用 CSS：
td { vertical-align: bottom; }
如果单元格里塞了
、

等块级元素，
vertical-align
会失效——它只对“行内盒”起作用，此时得换布局方式 vertical-align: middle 为什么经常看起来不居中 因为它对齐的不是单元格的几何中心，而是“行框（line box）的中间位置”。当单元格有固定高度、内容是多行文本或混排不同字号时，视觉上就会偏高。 单行文本 + 固定
height
：基本可用，但更稳的是设
line-height
等于
height
多行文本或图文混排：
vertical-align: middle
很可能失效，推荐改用
display: flex; align-items: center
IE8–IE11 下必须显式设
height
或
line-height
，否则
middle
会退化为
baseline
表现 别指望靠
padding-top
手动调——它破坏响应性，且在不同字体下表现不一致 复杂内容垂直居中的两个可靠方案 当
—— IE11+ 支持，简洁可控 兼容老 IE（如 IE9）：用
line-height
匹配
height
（仅限单行），或加
padding
手动预留空间（如
padding: 16px 12px
） 绝对不要用
position: absolute; top: 50%; transform: translateY(-50%)
—— 它让单元格失去自动高度计算能力，后续内容会塌陷 如果表格用了
border-collapse: collapse
，记得检查
padding
是否被压缩，否则 flex 对齐也会视觉偏移 最常被跳过的其实是 baseline 场景：当单元格里同时有小字号文字和大图标时，
vertical-align: baseline
会导致错位，这时
flex
是唯一解，别硬扛。

相关文章

内容
内容 里不止纯文本，而是
、
、表单控件或富文本时，
vertical-align
失效是常态。这时候得切换布局模型。 使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件 如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更 下载 立即学习 “ 前端免费学习笔记（深入） ”； 现代首选：
任意内容