align-items: baseline 会让元素看起来“偏高”是因为替换元素（如input、img）的基线位于下边缘上移x高度处，而非文字底部；替代方案包括flex-end（底对齐）、center（居中）、align-self单独调整等。

为什么 align-items: baseline 会让元素看起来“偏高”或“错位”

因为 baseline 对齐的是各子元素的**基线（baseline）**，不是文字底部，更不是容器底边。而像 input、button、img 这类替换元素（replaced elements）的基线默认是其**下边缘向上偏移一个字母 x 高度的位置**（约等于字体的 ex 单位），所以视觉上会比纯文本“浮高”。常见表现：一行里 span 文字和 input 并排时，input 看起来“顶着上面”。

align-items: baseline 的替代方案怎么选

根据实际对齐目标切换，别硬扛 baseline：

• 想让所有子元素**底部对齐** → 改用 align-items: flex-end
• 想让内容**垂直居中**（最常用）→ 改用 align-items: center
• 需要保留基线对齐但微调某个元素 → 给该元素加 margin-bottom 或 align-self: flex-end
• 仅对文字类元素做基线对齐（如 label + input）→ 把 input 设为 align-self: baseline，其余保持 center，避免全局影响

用 align-self 单独修正某个 flex 子项

比改整个容器的 align-items 更精准，尤其适合表单控件混排场景：

form {
  display: flex;
  align-items: center; /* 默认居中 */
}
input,
select,
button {
  align-self: baseline; /* 只让表单控件走基线 */
}
label {
  align-self: center; /* 标签仍居中，视觉更稳 */
}

注意：align-self 会覆盖父容器的 align-items，但只作用于当前元素；如果子元素本身是 flex 容器，它内部的 align-items 不受影响。

arcgis-js

提供 ArcGIS Maps SDK for JavaScript 开发辅助，涵盖 2D/3D 地图视图、图层管理、数据可视化、空间分析等功能模块的参考和示例指导。

下载

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

图片和图标在 baseline 下偏移的快速修复

img 和 svg 是典型的替换元素，基线位置不可见但影响大。不用 JS 计算，直接 CSS 控制：

• 让图片按底部对齐：vertical-align: bottom（仅对 inline/inline-block 有效，flex 下无效）→ 改用 align-self: flex-end
• 让图标和文字真正“脚对脚”：img { align-self: flex-end; margin-top: auto; }
• 更通用做法：统一设 img { vertical-align: middle; }（适用于非 flex 场景），但在 flex 容器中必须用 align-self

复杂点在于：不同字体、不同字号下基线位置会变，所以靠 baseline 做精确对齐本身就不可靠。真要像素级对齐，优先考虑 center 或 flex-end，再配合 margin 微调。