table元素的align="center"应替换为margin: 0 auto并设置明确宽度(如width: 80%或max-width: 800px),前提是table未设display: inline-block或float;外层div的text-align: center属间接居中,非表格自身居中。

table元素的align="center"怎么替代
直接失效,浏览器不再解析。align="center"写在<table>上等于没写,W3C验证器会报错“Attribute align is obsolete”。
<p>正确做法是给<code><table>加<code>margin: 0 auto,前提是它没被设成display: inline-block或float——否则margin: 0 auto不生效。
- 必须指定明确宽度,例如
width: 80%、width: 600px或响应式组合width: 100%; max-width: 800px;,否则margin: 0 auto无基准可算 - 如果
<table>外层有<code><div>且该<code><div>用了<code>text-align: center,表格会居中,但这是靠父容器“撑”出来的,不是表格自身居中 - 响应式场景下,
margin: 0 auto在max-width受限时依然有效;但若表格宽度超过容器,就会溢出,此时得配合overflow-x: auto -
text-align: right对<td>、<code><th>、<code><p></p>、<div>都有效,但对<code><table>或<code><tr>无效 <li>如果单元格里塞了<code><button></button>或<img>,text-align仍能控制它们的水平位置(前提是它们没设display: block) - 多行文本+图标混排时,
text-align只影响块级子元素的水平起始位置,不控制垂直线 - 给
<td>加<code>display: flex; align-items: center更可靠,但要注意:flex会忽略vertical-align,两者不能共存 - 若单元格内有
<div>且设了<code>display: block,vertical-align对它完全无效——那是父容器布局的事 - 调试时打开开发者工具,看 computed styles 里
vertical-align是否被覆盖成baseline,常见于重置 CSS 或继承了line-height -
valign="middle"对应的是vertical-align: middle,不是center;valign="bottom"也不是vertical-align: bottom的简单替换 - 若单元格未设固定
height或min-height,又没内容撑高,vertical-align: middle就找不到参考基准,看起来像没动 - 旧 ASP.NET Web Forms 中的
HtmlTableRow.Align和HtmlTableCell.Align虽是服务器端属性,但最终输出仍是废弃的 HTML 属性,应改用 CSS 类封装
td/th里的align="right"必须换vertical-align吗
不是。水平对齐不用vertical-align,要用text-align。align="right"写在<td>里,对应的是文字右对齐,等效 CSS 是<code>text-align: right。而vertical-align只管上下,和左右无关。
valign="middle"为什么写了没效果
因为valign已彻底废弃,而且vertical-align: middle本身就有生效前提:它只对display: table-cell(默认<td>)、<code>inline、inline-block元素起作用,且依赖“行框”高度。
旧项目批量替换align和valign的坑
删掉所有align和valign只是第一步。真正容易漏的是:valign="bottom"不能简单替换成vertical-align: bottom,尤其当单元格高度由内容撑开时,bottom会贴底,但视觉上可能离边。
text-align对块级子元素无效,vertical-align受行框高度制约,flex方案又可能干扰colspan/rowspan渲染。这些细节不调试到具体 DOM 节点,很难凭经验预判。











