align属性在现代HTML中失效，因HTML5已废弃所有align属性，仅靠浏览器兼容性“假装支持”，且vertical-align仅对行内元素和表格单元格有效，块级元素设之无效；可靠方案是用Flexbox、vertical-align配合行内元素或绝对定位。
align 属性不能用于上下对齐，HTML 标签本身已不支持垂直方向的对齐控制。
为什么 align 在现代 HTML 中失效
HTML5 明确废弃了所有 align 属性（如 <div align="top">、<img align="middle">），浏览器仅靠兼容性“假装支持”，但：
- 在严格模式或部分 WebView 中直接被忽略
- 无障碍工具不识别，影响可访问性
- React/Vue/Svelte 等框架模板中写它等于无效代码
-
<table align="center">控制的是整张表在页面中的左右位置，不是单元格内容上下对齐
vertical-align 只作用于特定元素
vertical-align 是唯一原生支持“上下对齐”的 CSS 属性，但它只对以下场景有效：
- 行内元素（
<span>、<img>、<input>）和表格单元格（<td>、<th>） - 对
<div>、<p>等块级元素设vertical-align完全无效 -
<tr>上设vertical-align: top也无效 —— 必须写在每个<td>或<th>上
常见误用：<div style="vertical-align: middle">文字</div> → 不起作用。
立即学习“前端免费学习笔记（深入）”；
真正可靠的上下对齐方案
现代布局中，应放弃对 HTML 属性的幻想，改用 CSS 方案：
- 单个行内元素（如图标+文字）：用
vertical-align: middle+ 行高匹配（line-height或font-size） - 表格单元格内容：直接在
<td>上设vertical-align: top/middle/bottom - 任意容器内的子元素垂直居中：用 Flexbox ——
display: flex; align-items: center; - 需要精确控制顶部/底部贴边且不依赖父高：用
position: absolute; top: 0;或bottom: 0;配合transform: translateY()
例如让一个 <span> 和旁边 <img> 垂直居中对齐：<span style="vertical-align: middle">文本</span><img src="x.png" style="vertical-align: middle">。
最常被忽略的一点：上下对齐从来不是“一个属性解决所有”，它高度依赖元素的显示类型（display 值）和上下文。不看 computed styles，光改 vertical-align 就想调准，基本是在碰运气。
