align属性在现代html中失效，因html5已废弃所有align属性，仅靠浏览器兼容性“假装支持”，且vertical-align仅对行内元素和表格单元格有效，块级元素设之无效；可靠方案是用flexbox、vertical-align配合行内元素或绝对定位。

align 属性不能用于上下对齐，HTML 标签本身已不支持垂直方向的对齐控制。

为什么 align 在现代 HTML 中失效

HTML5 明确废弃了所有 align 属性（如 <div align="top">、<code><img align="middle">），浏览器仅靠兼容性“假装支持”，但：

• 在严格模式或部分 WebView 中直接被忽略
• 无障碍工具不识别，影响可访问性
• React/Vue/Svelte 等框架模板中写它等于无效代码
• <table align="center"> 控制的是整张表在页面中的左右位置，不是单元格内容上下对齐 <h3> <code>vertical-align 只作用于特定元素

  vertical-align 是唯一原生支持“上下对齐”的 CSS 属性，但它只对以下场景有效：

  • 行内元素（<span></span>、<img>、<input>）和表格单元格（<td>、<code><th>） <li>对 <code><div>、<code><p></p> 等块级元素设 vertical-align 完全无效
  • <tr> 上设 <code>vertical-align: top 也无效 —— 必须写在每个 <td> 或 <code><th> 上 <p>常见误用：<code><div style="vertical-align: middle">文字</div> → 不起作用。
    

    Wechat HTML Publisher

    直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

    下载

    真正可靠的上下对齐方案

    现代布局中，应放弃对 HTML 属性的幻想，改用 CSS 方案：

    • 单个行内元素（如图标+文字）：用 vertical-align: middle + 行高匹配（line-height 或 font-size）
    • 表格单元格内容：直接在 <td> 上设 <code>vertical-align: top / middle / bottom
    • 任意容器内的子元素垂直居中：用 Flexbox —— display: flex; align-items: center;
    • 需要精确控制顶部/底部贴边且不依赖父高：用 position: absolute; top: 0; 或 bottom: 0; 配合 transform: translateY()

    例如让一个 <span></span> 和旁边 <img> 垂直居中对齐：<span style="max-width:90%">文本</span><img src="x.png" style="max-width:90%">。

    最常被忽略的一点：上下对齐从来不是“一个属性解决所有”，它高度依赖元素的显示类型（display 值）和上下文。不看 computed styles，光改 vertical-align 就想调准，基本是在碰运气。