align和valign在html5中已废弃，虽因浏览器兼容性仍可生效，但不应使用；应改用css的text-align（水平）和vertical-align（垂直）实现对齐，确保语义与样式分离、可维护性强。

HTML 中 <td> 的 <code>align 和 valign 属性确实能控制对齐，但它们在 HTML5 中已被废弃——不是“不能用”，而是“不该用”，现代项目中直接写会触发验证警告，且语义与样式混杂，后续维护成本高。

为什么 align 和 valign 还能生效？

浏览器出于向后兼容，仍解析这两个属性，尤其在 quirks mode 或旧文档类型下。但注意：

• align="justify" 在 IE 中会被当成 center 处理，行为不可靠
• align="char" 几乎没有浏览器支持，实际无效
• valign="baseline" 等扩展值不被所有浏览器识别，top/middle/bottom 是仅有的稳定取值
• 若同时设置 align 和 CSS 的 text-align，CSS 会覆盖 HTML 属性（层叠规则）

替代方案：用 CSS 控制对齐更可靠

HTML5 推荐用 CSS 分离结构与样式。对应关系明确：

• align="left" → text-align: left
• align="center" → text-align: center
• align="right" → text-align: right
• valign="top" → vertical-align: top
• valign="middle" → vertical-align: middle
• valign="bottom" → vertical-align: bottom

推荐写法是统一用类名或作用于 <td> 的选择器，例如： <pre class="brush:php;toolbar:false;">td.number { text-align: right; } td.header { vertical-align: bottom; } </pre> <p>这样既可复用，也避免内联样式污染 HTML 结构。</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/ai/4096" title="FakeYou"><img src="https://img.php.cn/upload/ai_manual/001/246/273/178599604431969.png" alt="FakeYou" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/ai/4096" title="FakeYou" class="overflowclass">FakeYou</a> <p class="overflowclass">FakeYou是一款AI音频处理工具，Deep Fake文本转语音。</p> </div> <a rel="nofollow" href="/ai/4096" title="FakeYou" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <h3>容易忽略的垂直对齐细节</h3> <p><code>vertical-align 的行为和直觉有偏差：

• 它只对 行内元素 和 表格单元格 有效；用在 <div> 上默认无效（除非设 <code>display: table-cell）
• 在 <td> 中设 <code>vertical-align: middle，是对齐单元格内容相对于该行的基线，不是相对于整个表格
• 若单元格含多行文本或图片，vertical-align 作用于整块内容的“框”，而非每行文本
• 想让文字在单元格中真正垂直居中，需确保父 <tr> 高度足够，否则可能被截断 <p>真正麻烦的不是“怎么写对齐”，而是“对齐之后为什么看起来没变”——多数时候是 <code>vertical-align 的作用域理解偏差，或父容器高度/行高未显式约束导致的渲染意外。