HTML标签不对齐主因是display类型、vertical-align参考系与baseline计算不统一；label与input错位因默认inline与replaced元素baseline位置不同，推荐用flex布局+align-items:center一并解决。
HTML标签不对齐，八成不是样式没加，而是对齐机制被默认行为“劫持”了——display类型、vertical-align参考系、基线（baseline）计算方式这三者不统一，加再多margin或padding也白搭。
label 和 input 垂直错位，padding-bottom 无效
因为label默认是inline元素，它的padding-top/padding-bottom虽能渲染出来（尤其加了背景色时），但不会影响下方input的位置——后者按 baseline 对齐，而label的 baseline 在文字底部，input的 baseline 实际在框体中间偏下，天然差几像素。
- 必须先让
label支持高度控制：设display: inline-block+vertical-align: middle（缺一不可） - 或者改用
display: block+width（否则长文本撑宽、短文本左右飘） - 更推荐：把
label和input包进一个容器，设display: flex+align-items: center，一行解决对齐+间距
表格里 td 中的按钮/输入框贴边、挤成一团
button和input塞进td后默认是baseline对齐、无间距、贴左上角——这不是 bug，是浏览器默认行为。靠给按钮加margin-right很难收效，因为父级td的vertical-align和padding没调好。
- 第一步：
td { padding: 8px; vertical-align: middle; }，提供呼吸空间并锚定垂直位置 - 第二步：按钮外层套
<div class="btn-group">，设display: flex+gap: 4px（比手动写margin-right更可靠，且自动处理最后一项） - 第三步：统一控件高度，必须设
box-sizing: border-box+ 固定height+ 显式line-height，否则跨浏览器高低不一
text-align 失效，文字或按钮就是不右移
text-align只作用于块级容器内的**行内内容**，不是万能对齐开关。常见失效场景：
立即学习“前端免费学习笔记（深入）”；
- 目标元素本身是块级（如
div、input）且没设宽度，text-align只影响它内部的文字，不影响它自身位置 - 子元素用了
float、position: absolute或display: flex，脱离文档流，text-align完全失效 - 误把
text-align写在行内元素（如span）自身上——它是父容器的属性，写在子元素上无效 - 父容器是
flex时，text-align彻底被忽略，此时该用justify-content（主轴）或align-items（交叉轴）
表格整体居中，align="center" 不要再用
<table align="center">是 HTML4 遗留写法，W3C 已废弃。它实际触发的是类似float的行为，不是真正的块级居中，在现代布局（如flex或grid容器）里极易失效，Chrome/Firefox 解析也不一致。
- 真正可靠的做法只有三种：
margin: 0 auto（需配合width）、text-align: center+display: inline-table、或display: flex+justify-content: center -
cellspacing和cellpadding也已废弃，改用border-spacing和padding替代 -
vertical-align只能写在td/th上，对table或tr加了也没用；值只能是top/middle/bottom/baseline，写center会完全失效
最常被忽略的一点：对齐问题往往不是“没加样式”，而是多个默认行为叠加后的意外结果——比如inline元素的空格、font-family不继承导致 baseline 偏移、box-sizing未重置引发 width 计算偏差。动手前先看 DevTools 里 computed 样式里的display、vertical-align和line-height，比盲目试 margin 有效得多。
