Angular 跨度和按钮在材料卡片中未垂直对齐

我正在尝试将一个按钮对齐到一个有角度的材质卡的右侧，如下所示

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

你好
编辑

虽然它可以工作，但它破坏了跨度和按钮的垂直对齐。如何修复它

---

Stackblitz:

如果您将此添加到CSS中：

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

---

它会将Hello与该框中的Edit对齐。使用铬进行测试

只需将

fxLayoutAlign=“start center”

属性添加到您的卡中，如下所示-

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

有关更多信息，请参考-

---

我真的不想通过注入CSS来解决这个问题。有没有办法通过material或flex软件包来解决这个问题？你可以使用

fxLayoutAlign=“start center”

我真的不想用CSS来解决这个问题。有没有办法通过材料或柔性包装来实现？

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