复选框与单行文本垂直居中对齐应使用 vertical-align: middle，需同时作用于 和相邻文本容器（如 ），避免仅设 input 导致错位；多行文本则须改用 display: flex + align-items: flex-start 实现顶部对齐。
复选框与单行文本垂直居中对齐用 vertical-align: middle
浏览器默认把 <input type="checkbox"> 当作内联元素，基线对齐（baseline），而文字的基线在字母底部，导致复选框看起来“浮高”。最轻量解法就是给它加 vertical-align: middle，同时确保紧邻的文本容器（比如 <label></label> 或 <font></font>）也设相同值。
常见错误是只给 input 加，漏掉文本标签——结果还是错位。另外别用 line-height 硬调，它依赖字体大小，换字体或缩放时容易崩。
input[type="checkbox"] { vertical-align: middle; }label, font { vertical-align: middle; }- 避免全局
input { vertical-align: middle; }，会干扰type="text"等其他输入框
表格里复选框居中对齐直接设 td 的 vertical-align
表格单元格默认 vertical-align: top，input 会贴着上边沿，看着歪。不要去改 input 的 margin 或 display，那会破坏表格流，还可能引发换行或宽度异常。
正确做法是控制容器：给 <td> 加 <code>vertical-align: middle，让整个单元格内容垂直居中，复选框自然就正了。
立即学习“前端免费学习笔记（深入）”；
-
td input[type="checkbox"] { margin: 0; }（先清掉可能的默认外边距） td { vertical-align: middle; }- 禁用已废弃的
align="center"属性，它不生效还污染 HTML
多行文本场景下用 display: flex 控制顶端对齐
当复选框后面跟的是换行文本（比如带 <br> 或长句自动折行），vertical-align 就失效了——它只管基线或行高，不管多行内容的整体位置。
此时必须升维：用 display: flex 把复选框和文本包进同一个容器（如 <div>），再用 <code>align-items: flex-start 让它们顶部对齐。这是唯一能保证复选框上边缘和第一行文字上边缘严格齐平的方式。
div.checkbox-container { display: flex; align-items: flex-start; gap: 0.5rem; }div.checkbox-container input[type="checkbox"] { margin: 0; }-
gap比margin更安全，不会触发外边距合并，也不依赖父容器的font-size
避免全局样式污染复选框尺寸
很多人写 input { width: 200px; } 后发现复选框被拉得巨大——浏览器强制把 width 应用到所有 input 上，包括 checkbox，但它的渲染逻辑根本不支持宽高设定。
复选框尺寸由 UA 样式决定，强行设 width / height 会导致布局错乱、点击区域异常，甚至在某些浏览器里完全不可见。
- 只对文本类输入框设宽：
input[type="text"], input[type="password"] { width: 200px; } - 如需微调复选框大小，用
transform: scale(1.2)（慎用，影响点击热区）或换 SVG 自定义控件 - 间距统一用
gap或margin-inline-end，别碰margin-top/bottom，容易和行高冲突
vertical-align，多行靠 flex，表格靠 td，而任何试图用 line-height、margin-top 或全局 input 样式硬调的，基本都会在换字体、缩放页面或换浏览器时露馅。
