vertical-align 对 input 和 button 无效是因为它们虽为 inline 元素，但父容器是块级上下文，未形成行内格式化上下文；需设 display: inline-block 并确保同处一行，或改用 flex 布局。
vertical-align 为什么对 input 和 button 不起作用
直接给 input 或 button 写 vertical-align: middle，常常没反应——不是写错了，而是它们默认是 display: inline（或 inline-block），但父容器没形成“行内上下文”。vertical-align 只在行内流或表格单元格里生效，而普通 form 是块级容器，不提供对齐基准线。
常见错误现象：input 和 button 看起来一高一低，尤其加了边框、圆角或图标后更明显；用开发者工具看，它们的基线（baseline）对齐了，但视觉中心却错开。
- 检查父容器是否设置了
font-size或line-height，这些会影响行内元素的基线位置 - 确认两个元素的
display值：如果其中一个是block，vertical-align完全无效 - 避免在
form上直接设text-align: center就以为能垂直居中——它只管水平对齐
真正起效的 vertical-align 用法
要让 vertical-align 生效，必须把两个元素放进同一个“行内行”里，常见做法是：
- 给父容器（比如
form或包裹div）设display: inline-block或display: table-cell - 或者把
input和button都显式设为display: inline-block，再统一加vertical-align: middle - 推荐组合：
input, button { display: inline-block; vertical-align: middle; }—— 简单、兼容 IE9+
注意：如果用了 box-sizing: border-box，记得 padding 和 border 不会撑大高度，否则 vertical-align 计算基准会偏移。
比 vertical-align 更稳的替代方案
当 vertical-align 开始难调（比如按钮带图标、输入框有上下 padding、字体渲染差异大），建议跳过它，直接上布局层方案：
-
display: flex+align-items: center：父容器设display: flex，子元素自动垂直居中，无视基线 -
position: relative包裹 +position: absolute按钮：适合右侧嵌入下拉箭头等固定尺寸按钮，控制精度高 - 避免用
line-height去“凑”高度——它只对纯文本有效，对替换元素（如input）行为不可靠
示例（flex 方案）：
form.search-container { display: flex; align-items: center; gap: 8px; } —— gap 替代手动 margin，更可控。
容易被忽略的细节：换行符和 font-size
HTML 源码里 input 和 button 标签之间如果有换行或空格，浏览器会渲染成一个空白字符，导致两者间出现“看不见的间隙”，进而影响 vertical-align 的实际效果。
- 删掉标签间的换行是最直接解法：
<input><button></button>连写 - 或在父容器设
font-size: 0消除空白字符，但必须在子元素里重置font-size，否则input文字会消失 -
font-size: 0还会影响input的默认高度（因内建 padding 依赖字号），需额外设height或padding
这个细节在调试时经常被跳过，结果花半小时调 vertical-align，其实问题出在 HTML 换行上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
