根本原因在于input和button的vertical-align默认值不同，且font-size、line-height、padding不一致；必须同步控制vertical-align、font-size、line-height，或改用flex布局（父容器display: flex + align-items: center）一劳永逸解决对齐问题。

为什么设置相同 height 还是错位

根本不是 height 没生效，而是 input 和 button 的 vertical-align 默认值不同：input 对齐基线（含下划线），button 对齐文字字体基线；再加上默认 font-size、line-height、padding 不一致，视觉上必然一高一低。

常见错误现象：两者都设了 height: 40px，但按钮顶部明显高出输入框；或按钮文字“悬空”在框内偏上位置。

• 别只调 height，必须同步控制 vertical-align、font-size 和 line-height
• button 内若含图标字体（如 fa-search），其 font-size 往往比 input 默认的 14px 更大，直接拉高盒模型
• 老浏览器中 button 可能用 content-box，而 input 默认 border-box，同样 height 下实际渲染高度不同

用 display: flex 一劳永逸对齐

放弃折腾 vertical-align 和 line-height，直接把父容器设为弹性布局。这是现代项目首选，响应式友好且逻辑清晰。

关键点：只有父容器加 display: flex 才生效，单独给 input 或 button 加无效。

立即学习“前端免费学习笔记（深入）”；

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 父容器（如 div.search-bar-wrapper）必须设 display: flex 和 align-items: center
• 若要按钮紧贴输入框右侧，给 button 加 margin-left: auto；若要整体右对齐（比如导航栏里多个元素），才用 justify-content: flex-end
• 避免给子元素设 float、display: block 或 vertical-align，会和 flex 行为冲突
• 需要等宽拉伸时，给 input 加 flex: 1，button 保持自然宽度

兼容 IE10 及以下的老方案

Flexbox 不支持？那就得回归传统，但必须更严格地统一底层参数。

常见错误：只设 vertical-align: middle 却忽略 font-size 差异，结果还是错位。

• 统一设 vertical-align: top（比 middle 更稳定，尤其含图标时）
• 强制 input 和 button 的 font-size 相同（例如都设为 14px）
• button 配合 line-height: 40px（与 height 一致），能有效压平文字垂直位置
• 消除换行空白：HTML 中 <input><button> 必须写在同一行，或父容器设 font-size: 0 后单独恢复子元素字号

table 单元格里按钮怎么居中

表格单元格里的按钮对齐失败，往往不是按钮本身问题，而是 td 高度不可控、button 渲染模式不匹配所致。

典型现象：按钮在 td 里偏上、偏下，或高度随文字长度变化，整行看起来参差不齐。

• td 必须显式设 vertical-align: middle 和固定 height（如 height: 48px）
• button 改为 display: block 或 display: flex，再配 align-items: center + justify-content: center
• 给 button 加 box-sizing: border-box，确保 width: 100% 和 height: 100% 真正生效
• 禁用 button 的 margin，它会溢出 td 边界，破坏高度约束

真正容易被忽略的是：对齐从来不是单个元素的事——它依赖父容器的布局上下文、子元素的盒模型一致性、以及文本渲染的隐式基准线。哪怕用了 flex，如果父容器没设 display: flex，或者子元素偷偷加了 float，照样错位。