диапазон и кнопка не выровнены вертикально в карточке материала

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 со словом Edit в этом поле.Тестирование с использованием Chrome.