根本原因在于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></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边界，破坏高度约束
display: flex，或者子元素偷偷加了 float，照样错位。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
