label与input对齐失败主因是布局上下文不同：label为inline元素width无效，input为替换元素受line-height等多因素影响；需用flex容器包裹并设align-items: center统一控制。
错位不是样式没写对，而是你没意识到浏览器默认怎么“看”这些元素——label、input、button、img 各自的基线、盒模型、display 类型和字体上下文全都不一样。
为什么 label 和 input 总是左对齐失败
因为 label 默认是 inline 元素，width 无效；而 input 是替换元素（replaced element），其高度受 line-height、font-size、border 和 box-sizing 共同影响。两者不在同一布局上下文中，硬调 margin-top 只是掩耳盗铃。
- 必须先让
label脱离 inline 流：加display: block或display: inline-block - 固定宽度要覆盖最长文本（比如 “this exact word or phrase:”），建议取
140px或150px，别靠目测 - 每组
label+input应包裹在独立容器里（如<div class="form-row">），再对该容器设 <code>display: flex; align-items: center; - 避免用
float或table-cell——它们会破坏语义，且在响应式下极易崩溃 - 最稳方案：父容器设
display: flex; align-items: center;，彻底绕过 baseline 计算 - 若需兼容 IE10，fallback 方案必须三者同步：
vertical-align: middle+font-size: 14px+line-height: 40px（匹配 height） - HTML 源码中
<input><button></button>必须写在同一行，或父容器设font-size: 0再单独恢复子元素字号，否则换行产生的空格会额外加几像素间隙 - 别给
button单独加margin-top——flex 容器里它会被忽略，还可能引发渲染冲突 - 首选
vertical-align: middle，但注意它依赖父容器line-height；若父容器line-height过大，middle 会偏高，可改用vertical-align: top - 更彻底的解法：把
img和表单控件一起包进display: flex容器，设align-items: center - 务必声明
img的width和height（哪怕只是占位值），否则加载前占位为 0×0，加载后突然撑开，会拖动相邻表单位置——这常被误判为“对齐问题”，实则是布局抖动 - 表单控件本身也要重置：
box-sizing: border-box+ 显式padding+ 统一font-size，否则跨浏览器默认样式差异会让对齐失效 - 表格居中只认三种可靠方式：
margin: 0 auto（需设 width）、display: inline-table+text-align: center父容器、或display: flex+justify-content: center - 单元格内容水平对齐只用
text-align，别碰align属性——它优先级混乱，调试时难以复现 - rowspan 错位往往不是写错了，是 HTML 解析器自动补全了缺失的
，导致计数包含空行；务必保证每行<td> 总数恒定，用 <code><thead>/<code><tbody> 明确分组 <li>长文本撑破表格？加 <code>word-break: break-all或overflow-wrap: break-word，别只靠max-width
input 和 button 在同一行却高低不一
这不是 height 没生效，是 vertical-align 默认值不同：input 对齐 baseline（含下划线位置），button 对齐内容字体基线；再加上 button 内部图标字体常比 input 的 14px 更大，视觉上必然下沉。
img 紧挨着表单时“飘起来”或“沉下去”
img 是 inline 元素，默认按 baseline 对齐，而表单控件底部预留了 descender 空间（字母 g、y 下延部分），所以图像看起来总比 input 高一点——这不是 bug，是设计使然。
表格整体居中和单元格对齐为什么总出意外
align="center" 已被 HTML5 废弃，Chrome/Firefox 解析不一致；valign 只对 td/th 内容有效，且必须有高度支撑（比如 height: 40px），否则 vertical-align: middle 看不出效果。
真正难处理的从来不是“怎么对齐”，而是你没意识到：图像还没加载完、用户代理样式正在悄悄覆盖你的 padding、或者父容器的 font-size 正在让 em 单位漂移——这些问题不会报错，但会让对齐在不同设备上反复失效。
