Angular Material：mat-icon-button与相邻元素基线未对齐问题排查

根本原因 #

• 当给mat-icon-button设置display: inline-flex后，它作为行内级flex容器，默认vertical-align为baseline。此时若同时设置align-items: center，内部图标会垂直居中，但inline-flex容器的基线计算规则会改变：它不再以内部元素的基线为基准，而是基于容器自身的布局边界，导致整个按钮相对于相邻行内元素（比如文本）的基线偏移，视觉上呈现上移效果。
• 移除align-items后，flex容器默认使用align-items: stretch，此时inline-flex容器的基线会和内部图标的基线对齐，按钮能和相邻元素基线对齐，但图标在按钮容器内无法保持垂直居中。

解决方案 #

方案1：保留align-items:center，添加vertical-align:middle #

这是已验证的有效方法，给mat-icon-button额外设置：

vertical-align: middle;

既能通过align-items:center保证图标在按钮内部垂直居中，又能让整个inline-flex按钮容器与相邻元素的中间对齐，视觉上实现基线对齐的效果。

方案2：调整flex容器对齐逻辑（可选） #

若不想使用vertical-align，可尝试给图标设置合适的内边距或高度，同时将align-items设为baseline，让图标在按钮内居中的同时，容器基线与图标基线对齐。但这种方式需要根据按钮尺寸、图标大小微调样式，通用性不如方案1。

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