text-align是唯一标准、可靠的水平对齐属性，必须作用于或等块级容器以控制其内部行内内容对齐；align="center"等html属性在html5中已废弃，会导致兼容性差、w3c验证失败和样式不可控。
text-align 是唯一该用的水平对齐属性
HTML 标签里直接写 align="center" 或 align="right" 是错的——这些属性在 HTML5 中已被废弃，浏览器虽可能兼容，但会导致样式不可控、审查报错、团队协作混乱。真正起作用且被标准支持的，只有 CSS 的 text-align。
它只作用于块级容器（如 <div>、<code><p></p>、<th>、<code><td>），控制其内部行内内容（文字、图片、<code><span></span> 等）的水平位置。
-
text-align: left：默认值，左对齐 -
text-align: center：居中（最常用） -
text-align: right：右对齐 -
text-align: justify：两端对齐，适合多段落正文，但注意中文效果有限，词距拉伸不自然
表格单元格（<td> / <code><th>）要单独处理
<p>表格里的对齐容易被误认为是“整行”或“整表”的事，其实 <code>text-align 必须作用在单元格级，而不是 <tr> 或 <code><table> 上。因为 <code><tr> 本身不是块级容器，不接受 <code>text-align；而 <table> 即使设了，也不会向下继承到单元格。
<p>正确写法是：</p>
<pre class="brush:php;toolbar:false;">td, th {
text-align: center;
}</pre>
<p>或者更精细地控制：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img
src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a>
<p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p>
</div>
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul>
<li>数字列右对齐：<code>td.number { text-align: right; }
th { text-align: center; }
td.action { text-align: left; }
别把 text-align 当成“让 div 居中”的工具
这是新手最常踩的坑：text-align: center 放在父 <div> 上，想让它里面的另一个 <code><div> 水平居中——没用。因为 <code>text-align 不影响块级子元素的位置，只影响行内内容。
要让块级元素（比如一个卡片 <div class="card">）在父容器中水平居中，得用：
<ul>
<li>
<code>margin: 0 auto（需有明确宽度）
display: flex; justify-content: center（推荐，无宽度限制）display: grid; place-items: center（现代布局，一行搞定）混用 text-align 和 margin: auto 不仅无效，还会造成调试困惑。
响应式场景下，对齐方式可能需要断点重置
移动端窄屏时，居中文字可能因换行导致视觉偏移；右对齐的按钮在小屏上可能紧贴边缘。不要假设一套 text-align 能通吃所有尺寸。
例如，表格在手机上转为堆叠布局时，原本右对齐的金额列，可能更适合左对齐以保持阅读动线：
@media (max-width: 480px) {
td.amount, th.amount {
text-align: left;
}
}
还有种隐形陷阱：某些 UI 框架（如 Bootstrap）会全局重置 text-align，比如给 .text-center 加 !important，结果你自定义的类被覆盖。查 computed styles 比猜更可靠。
