应统一设vertical-align: middle或top，并用flex布局包裹label+input组合；需重置box-sizing为border-box、显式控制line-height与font-size，避免HTML空格干扰，且每组label与input须独立包裹于.form-row容器中。
表单输入框（<input>）本身是替换元素，不能直接嵌套 HTML 元素；你真正想对齐的，大概率是 <label> 和 <input> 这一对组合，或者 <input> 与其旁边按钮、图标等元素的视觉对齐。核心问题不是“输入框里放 HTML”，而是“怎么让它们看起来水平/垂直对齐”。
input 和 button 并排底部不齐，怎么 fix
这不是 bug，是 vertical-align: baseline 在作祟：<input> 和 <button> 默认都走 baseline 对齐，但基线位置不同——<input> 基线在文字下边缘（含下划线），<button> 基线在其字体内容上，尤其带图标字体时更明显。
- 统一设
vertical-align: middle或top，别依赖baseline - 加
box-sizing: border-box到两者，避免padding/border撑宽/撑高 -
<button>配height+line-height（如height: 40px; line-height: 40px;），<input>用padding控制视觉高度 - 删掉 HTML 中
<input>和<button>之间的换行或空格，写成<input><button></button>，或父容器设font-size: 0再单独恢复子元素字号
label 和 input 总是错位，flex 怎么套才不翻车
别把整个 <form> 当 flex 容器。错位根源是 label 和 input 不在一个局部上下文里，对齐逻辑失控。
- 结构必须是每组
<label>+<input>包进独立<div class="form-row"> -
.form-row { display: flex; align-items: center; gap: 0.5em; }——gap比margin更安全，不触发 collapse -
label设flex: 0 0 100px（固定宽防挤压），input设flex: 1; min-width: 0（防小屏溢出） - 别给
input单独加margin-top或vertical-align，flex 容器里这些属性无效或冲突
text-align: center 是对 input 内容居中，不是对 input 本身
很多人混淆这两层：控制输入框内文字对齐，和控制输入框在页面中位置对齐，是两件事。
立即学习“前端免费学习笔记（深入）”；
-
input { text-align: center; }→ 让用户输进去的文字居中显示（适用于验证码、短编号等场景） - 想让整个
<input>在父容器中水平居中，得靠父级布局：text-align: center（配display: inline-block）、margin: 0 auto（需固定宽）、display: flex; justify-content: center等 - 若父容器是 flex，
input自身设text-align仍只影响内部文字，不影响它在 flex 主轴上的位置
最易被忽略的是：所有表单控件（<input>、<select>、<textarea>、<button>）必须统一 vertical-align 和 box-sizing，否则哪怕用了 flex，跨浏览器渲染差异仍会暴露出来——尤其是 iOS Safari 对 <label> 的定位处理更敏感。
