material 卡片中的跨度和按钮未垂直对齐

Question

我正在尝试将按钮对齐到 angular material 卡片的右侧，如

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

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

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

Answer 1

如果您将此添加到您的 CSS：

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

它将在该框中将单词 Hello 与单词 Edit 对齐。使用 Chrome 进行测试。

Answer 2

只需将 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

material 卡片中的跨度和按钮未垂直对齐

span and button not vertically aligned in material card

angular-material

angular-flex-layout

angular