input 和 button 垂直对齐失效的根源是 vertical-align 默认值不同、baseline 计算不一致，叠加换行空白符、box-sizing 差异及字体渲染差异；现代首选 display: flex + align-items: center，旧浏览器 fallback 用 display: table-cell；需重置 button 边框与内边距、统一 box-sizing 和 font-size。

input 和 button 垂直对齐失效的根源

不是 height 设一样就能对齐，而是 vertical-align 默认值不同、基线（baseline）计算逻辑不一致，加上换行产生的空白符、box-sizing 差异和字体渲染差异，共同导致视觉错位。哪怕都设了 height: 40px，Chrome 下 input 可能略高，Firefox 下 button 可能略低，偏差常在 1–2px。

用 display: flex + align-items: center 一劳永逸

这是现代项目首选方案，无需纠结 baseline，也不用重置一堆属性：

• 给包含 input 和 button 的父容器加 display: flex 和 align-items: center
• 确保 HTML 中两个标签顺序合理（如按钮在右，则 input 在前、button 在后）
• 移除所有影响布局的 float、vertical-align、margin-top 等干扰样式
• 若需按钮等宽或输入框占满剩余空间，可对 input 加 flex: 1

兼容旧浏览器时的 fallback 方案

IE10 及以下不支持 Flex？改用 display: table-cell 更可靠：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 父容器设 display: table; width: 100%（必须有宽度）
• input 和 button 各自设 display: table-cell; vertical-align: middle
• 避免混用 inline-block + font-size: 0，后者在缩放或高 DPI 屏幕下易出间隙
• 务必统一 font-size 和 line-height，例如都设为 font-size: 14px; line-height: 40px;

容易被忽略的细节

对齐问题常在看似“已解决”后复发，关键在三个隐性条件：

• button 默认有 border 和 padding，不同浏览器默认值不同，建议全局重置：button { border: 0; padding: 0; }
• input 必须是 box-sizing: border-box，否则 height 不含边框，而 button 多数浏览器默认就是 border-box
• HTML 源码中换行会生成空格字符，即使用了 flex，若父容器 font-size 较大，仍可能在按钮左侧透出几像素缝隙——最稳写法是把两个标签写在同一行：

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！