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

Я пытаюсь выровнять кнопку справа от угловой карты материала, как

<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


angular angular-material angular-flex-layout
person Saksham    schedule 23.09.2019    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Просто добавьте атрибут fxLayoutAlign="start center" к своей карточке, вот так:

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

OR

Замените свой css следующим образом:

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

Для получения дополнительной информации вы можете обратиться -

person Pardeep Jain    schedule 23.09.2019
comment
Я действительно не хочу вводить CSS, чтобы исправить это. Есть ли способ сделать это с помощью материала или гибкого пакета? - person Saksham; 23.09.2019

arrow_upward
0
arrow_downward

Если вы добавите это в свой CSS:

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

Это выровняет слова Hello со словом Edit в этом поле. Тестирование с помощью Chrome.

person MistaPrime    schedule 23.09.2019
comment
Я действительно не хочу вводить CSS, чтобы исправить это. Есть ли способ сделать это с помощью материала или гибкого пакета? - person Saksham; 23.09.2019
comment
Вы можете использовать fxLayoutAlign="start center" - person MistaPrime; 23.09.2019