HTML标签对齐应使用CSS而非align/valign属性：text-align控制行内内容对齐，块级元素居中需width+margin:0 auto，flex布局优先用于表单和响应式对齐，vertical-align仅适用于单元格或行内元素基线调整。
直接说结论：HTML 标签对齐不是靠 align 或 valign 属性“设置”出来的，而是靠 CSS 的 text-align、margin、display: flex 等组合控制；用 HTML 属性强行对齐，要么失效，要么行为不可控，调试时会浪费大量时间。
text-align 只作用于块级容器内的行内内容
很多人写 <p align="right">文字</p> 能临时生效，是因为浏览器还在兼容旧语法，但实际起效的是隐式 fallback 到 text-align: right。真正可靠的写法是：
- 给父元素（如
<div>、<p>、<th>）加text-align: right，它只影响内部文字、<img>、<span>这类行内内容 -
text-align对<div>子元素（默认块级）无效——除非子元素设了display: inline-block或display: inline - 表格单元格里右对齐金额，别在每个
<td>上写align="right"，统一写td:nth-child(3) { text-align: right; }
让块级元素（如 table、div）水平居中必须设 width
margin: 0 auto 不是万能的，它只对“有明确宽度”的块级元素生效。常见错误包括：
-
<table style="margin: 0 auto;">—— 没设width，浏览器按内容撑开，auto失效 - 父容器用了
display: flex，再给子<table>加margin: 0 auto，会被 flex 主轴对齐覆盖 - 响应式场景下，
width: 90%+margin: 0 auto是安全选择；固定像素宽（如width: 600px）需配合媒体查询降级
表单 label 和 input 对齐的关键是每组独立 flex 容器
不要试图全局统一对齐所有 <label>，它们默认是 inline 元素，宽度随文本变，硬设 width + float 易塌陷。正确路径是：
立即学习“前端免费学习笔记（深入）”；
- 把每对
<label>+<input>包进一个<div class="form-row"> .form-row { display: flex; align-items: center; gap: 0.5em; }-
.form-row label { flex: 0 0 120px; }（固定标签宽度，防换行挤压） -
.form-row input { flex: 1; min-width: 0; }（输入框自适应，小屏不溢出）
vertical-align 不是给父容器用的，只管单元格/行内元素内部基线
vertical-align: middle 常被误加在 <table> 或 <tr> 上，其实它只对以下情况有效：
-
<td>、<th>、<tr>标签本身（控制单元格内容垂直位置） -
<img>、<span>、<input>这类行内或 inline-block 元素（调整其相对于行框的基线） - 必须有高度支撑：如果
<td>内容只有一行文字且没设height或line-height，vertical-align: middle看不出效果 - 值只有
top、middle、bottom、baseline四种，center是错的，写了也不生效
最常被忽略的一点：对齐不是孤立属性，它依赖上下文——父容器的 display 类型、子元素的盒模型类型、是否设置了 line-height 或 height，都会改变最终表现。动手前先看 computed styles，比猜更省时间。
