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

Question

我正在尝试将一个按钮对齐到有角材质卡的右侧

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

虽然它有效，但它破坏了跨度和按钮的垂直对齐。如何解决？

Stackblitz：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 与该框中的单词 Edit 对齐。使用 Chrome 进行测试。