垫子图标按钮和垫子按钮的对齐

Question

我有一个场景，我想将一些按钮对齐在同一水平线上。我不明白为什么 mat-icon-button 没有与其他按钮相同的对齐方式。两者的默认高度都是 48px，但看起来还是这样。

我知道我可以将其与 Bootstrap 对齐，但随之而来的是其他问题。我将通过按钮左侧的垫片获得更多输入。它们的数量是动态的，这将导致多行，并且每行上的芯片、垫平面按钮和垫图标按钮应该对齐。

为什么这是默认行为？什么是可行的解决方法？

Answer 1

只需添加

vertical-align: bottom

即可解决问题！

<div style="border: 1px solid black">
  <button mat-flat-button>Basic</button>

  <button mat-flat-button color="warn">
    <mat-icon>more_vert</mat-icon>
  </button>

  <button mat-icon-button style="border: 1px solid black;vertical-align: bottom;">
  <mat-icon>more_vert</mat-icon>
  </button>
</div>

Stackblitz 演示