最稳方案是设 label 为 display: inline-block 并配固定宽度、text-align: right 和 vertical-align: middle，确保与 input 严格水平对齐且兼容 IE9+；需避免 width: 100%、外层 height/overflow 隐藏 outline，以及 reset 或组件库覆盖默认样式。
用 inline-block 控制 label 与 input 水平对齐最稳
直接设 label 为 display: inline-block，配固定宽度和 text-align: right，就能让所有标签右对齐、垂直居中、与右侧输入框严格水平对齐。比 float 不易塌陷，比 flex 更容易控制单行间距，且兼容 IE9+。
常见错误现象：标签“飘”在输入框上方、多行时错位、响应式后宽度崩坏。
-
label宽度必须 ≥ 最长标签文本（如"Confirm Password"至少要160px），硬写width: 100%会失效 -
vertical-align: middle必须加在label和input上，否则默认 baseline 对齐，视觉上像“吊着” - 别给外层
div设height或overflow: hidden，会裁剪 focus 状态的 outline 或 box-shadow - 若用 CSS 重置（如 normalize.css），检查是否把
label的display改成了block—— 需显式覆盖回inline-block
表格里 td 右对齐但数字不整齐？光靠 text-align: right 不够
text-align: right 只管文字块整体右对齐，对数字列来说，小数点、负号、全角空格都会破坏视觉对齐。真正整齐得靠三件事：等宽字体 + 干净数据 + 避免嵌套布局干扰。
使用场景：后台报表、财务明细、API 响应状态码列表。
立即学习“前端免费学习笔记（深入）”；
- 强制等宽字体：
font-family: 'SFMono-Regular', Consolas, monospace - 确保 HTML 中数字无前后空格，减号用 ASCII
-而非 Unicode−（U+2212） - 禁止在
td内部用display: flex或float—— 这会让text-align完全失效 - 如果用了 Ant Design 或 Element Plus 等组件库，优先查
.ant-table-cell是否带!important覆盖了你的样式
align 属性在 HTML5 中已彻底失效，别再写了
<td align="right"> 或 <code><div align="center"> 在 HTML5 中不是“过时”，而是被 W3C 明确废弃。浏览器只是向后兼容才没立刻报错，但 iOS Safari 某些版本、WebView、无障碍工具会直接忽略它。
<p>容易踩的坑：本地开发看着好好的，上线后 QA 发现表格内容左对齐；或用 axe 工具扫描时，该属性被标为“语义无效”。</p>
<ul>
<li>替代方案只有 CSS：<code>text-align: right（水平）、vertical-align: top（垂直）
text-align 必须作用在 td 或 th 上，写在 tr 或 table 上不可靠，尤其当单元格有内联样式时<col class="num-col"> + CSS .num-col { text-align: right; }，比每个 td 加 class 更干净响应式下左右对齐变乱？关键在容器宽度和 white-space
小屏时标签文字换行、输入框撑宽、或者英文长单词顶破容器，都会让原本对齐的布局错位。这不是对齐方式错了，是容器没守住底线。
性能影响不大，但可访问性和 QA 通过率直接受损。
- 给表单容器加
min-width: 300px，防止极端压缩下label宽度失守 - 英文/URL/连续数字超长时，在
input或td上加word-break: break-all或overflow-wrap: break-word - 避免用
white-space: nowrap强制不换行 —— 小屏下直接横向滚动，破坏体验 - 如果用
flex包裹表单项，别在label上写width，改用flex: 0 0 160px，更适配弹性容器
Computed 面板，只靠改代码永远调不准。
