根本原因是文本元素与替换元素的基线定义不同：文本以文字底部为基线，而img、input等替换元素默认以底边为基线；需用vertical-align调整或改用align-items:center。
使用 align-items: baseline 时子元素基线对齐不一致，根本原因在于不同元素的“基线”定义不同——文本元素以文字底部为基线，而图片、按钮、输入框等替换元素（replaced elements）的基线默认是其底边（bottom edge），不是字体基线。直接设 align-items: baseline 往往达不到视觉对齐效果。
确认哪些元素有真实文本基线
只有包含内联文本内容（如 span、p、button 内的文字）且未被其他对齐方式干扰的元素，才拥有与字体相关的基线。img、input、textarea、svg 等替换元素默认没有文本基线，它们的“baseline”由浏览器按规范设定（通常是底边），和文字基线天然错位。
- ✅ 有基线：
<span>文字</span>、<h3>标题</h3>、带文字的<button> - ❌ 无文本基线：
<img>、<input type="text">、<textarea>、空<div>
用 vertical-align 统一替换元素的基线位置
对 flex 容器中参与 baseline 对齐的替换元素（如图片、输入框），单独设置 vertical-align: baseline 或更精确的值（如 middle、text-bottom），可强制其对齐到父容器的文本基线区域。注意：该属性只在 flex 子项为 inline-level（如 img）或 table-cell 时生效，但现代浏览器对 flex 子项也支持部分 vertical-align 行为。
-
vertical-align: text-bottom：让图片底边对齐父元素字体的“底线”（descender line），常比 baseline 更贴近文字视觉基线 -
vertical-align: middle：让元素中点对齐父元素基线 + 0.5ex，适合图标与文字垂直居中 - 避免只依赖
align-items: baseline，必须配合子元素自身的vertical-align
用伪元素或行内块模拟统一基线
当混合类型复杂（如图标+文字+输入框），建议放弃纯 baseline 对齐，改用更可控的方式：
立即学习“前端免费学习笔记（深入）”；
- 将所有子项设为
display: inline-flex或display: inline-block，再用vertical-align: middle统一对齐 - 给无文本内容的元素（如空 div、iconfont）添加
::before伪元素并写入零宽空格（\200b），使其产生一个“隐形文本基线” - 对 input 等表单控件，包裹一层
<span class="align-baseline"><input></span>，并对该 span 设置font-size: 0+vertical-align: baseline，内部 input 再恢复 font-size
优先考虑 align-items: center 或 stretch
多数场景下，“基线对齐”并非真正需求，而是想实现“看起来整齐”。相比难控的 baseline，align-items: center 视觉一致性更强，兼容性更好；若需高度拉伸一致，用 stretch 更可靠。只有明确需要文字底部严格对齐（如化学式、数学符号排版）时，才值得深入调试 baseline。
不复杂但容易忽略。
