为何内容影响inline-flex父元素对齐？如何实现按钮对齐与图标居中

针对带图标与不带图标按钮出现垂直偏移的问题，结合不能修改父容器样式、必须保留display: inline-flex的限制，可通过以下方案解决：

1. 统一按钮间的垂直对齐基准 #

给所有按钮添加vertical-align: middle，覆盖inline-flex元素默认的baseline对齐规则：

.button {
  display: inline-flex;
  vertical-align: middle; /* 核心：让所有按钮以垂直中线为基准对齐 */
}

该设置会消除带图标按钮与无图标按钮之间的偏移，确保所有按钮整体对齐。

2. 保证按钮内部图标垂直居中 #

利用inline-flex的布局特性，给按钮添加align-items: center，让内部图标和文本沿交叉轴垂直居中：

.button {
  display: inline-flex;
  vertical-align: middle;
  align-items: center; /* 让按钮内的图标、文字垂直居中 */
  gap: 4px; /* 可选：给图标与文字添加间距，优化视觉效果 */
}

此设置既确保图标在按钮内的位置符合预期，也不会破坏按钮之间的整体对齐。

补充说明 #

所有调整仅作用于按钮组件内部，无需修改父容器样式，完全适配现有inline-flex的使用场景，且兼容主流浏览器。

内容的提问来源于stack exchange，提问作者gxk28