在材料卡中没有垂直对齐的跨距和按钮

Question

我正在尝试将一个按钮对齐到角材质卡的右边，如

<mat-card fxFlex="70" fxFlexOffset="15"  class="margin-10">
    <span>Hello</span>
    <div fxFlex></div>
    <button mat-button>Edit</button>
</mat-card>

虽然它可以工作，但它破坏了跨度和按钮的垂直排列。怎么修呢？

Stackblitz at：https://stackblitz.com/edit/angular-employee-management-firebase-material-flex

Answer 1

把fxLayoutAlign="start center"属性添加到你的卡中，就像这样-

<mat-card fxFlex="70" fxFlexOffset="15" fxLayoutAlign="start center" class="margin-10">

或

像这样替换你的css -

.margin-10 {
  margin: 10px;
  display:flex;
  align-items:center;
}

想了解更多信息，你可以参考-

• https://github.com/angular/flex-layout/wiki/fxLayoutAlign-API

Answer 2

如果将其添加到CSS中：

.mat-card {
    align-items: center;
}

它将使单词Hello与该框中的“编辑”字对齐。使用Chrome进行测试。