text-align仅作用于块级容器内的行内内容，不控制块级元素自身位置；失效常见原因包括子元素为块级且无宽、脱离文档流（如float/absolute）、误用于行内元素自身。
直接用 text-align 控制文本对齐最简单可靠，但必须清楚它只作用于块级容器内的**行内内容**——不是所有“看起来该对齐”的地方都适用这个属性。
text-align 为什么有时失效
常见现象：给 <div> 加了 <code>text-align: right，但里面的 <input> 或 <button></button> 没右移；或者给 <p></p> 设了 text-align: center，文字却没居中。
- 原因一：目标元素本身是块级且未设宽度，
text-align不影响它的位置，只影响它内部的文字/行内子元素 - 原因二：子元素用了
float、position: absolute或display: flex，脱离了普通文档流，text-align失效 - 原因三：误用于行内元素（如
<span></span>）自身——text-align是父容器的属性，不能写在<span></span>标签上
标题（h1–h6）右对齐的两种写法
不推荐用已废弃的 align 属性（如 <h2 align="right"></h2>），现代写法只有 CSS 方式：
- 行内样式：
<h2 style="text-align: right;">用户协议</h2> - 类名复用：
<h2 class="title-right">用户协议</h2>，配合 CSS 中定义.title-right { text-align: right; }
注意：text-align: right 让的是标题**内部文字右对齐**，不是把整个 <h2></h2> 块“推到页面右边”——要后者得用 margin-left: auto 或 float: right（但后者需清除浮动）。
表格中单元格内容对齐要分层控制
<table> 的对齐逻辑是三层嵌套：表格整体、行（<code><tr>）、单元格（<code><td> 或 <code><th>）。关键点：
<ul><li>不要依赖 <code><table align="right"> —— 这个属性已被废弃，且行为不可控
<li>单元格内文本对齐用 <code>text-align（如 <td style="text-align: center;">）
<li>整列对齐更稳妥的方式是给 <code><col> 设置样式：<col style="text-align: right;">
vertical-align（值为 top/middle/bottom），写在 <td> 上，不是 <code><tr>
<h3>flex 容器里别混用 text-align 和 justify-content</h3>
<p>当父容器设了 <code>display: flex，text-align 就完全失效了——此时控制主轴对齐的是 justify-content，交叉轴才是 align-items。
- 想让 flex 项目左对齐：用
justify-content: flex-start（不是text-align: left） - 想让项目内文字左对齐：仍需在项目自身加
text-align: left（因为项目可能是块级容器） - 典型错误：
<div style="display: flex; text-align: right"><span>文字</span></div>—— 文字不会右对齐
真正容易被忽略的是：对齐方式的选择取决于你控制的是“内容的位置”，还是“内容内部的排版”。同一个标签上同时出现 text-align、justify-content、margin 时，优先级和生效范围完全不同，得一层层看父容器的 display 类型。
