对齐垫卡内容(图像、文本和按钮) [英] Align mat-cards content (image, text and buttons)

问题描述

我正在使用列表中的 mat-card，但对齐有问题.

这是我所拥有的:

这是我想要的:

代码:

<div fxFlex=20"fxFlex.md=33"*ngFor=让广告的广告；让 i = 索引"class="padding-fix"><div fxFlexFill fxLayoutAlign=中心拉伸"><mat-card class="ad"><div fxLayoutAlign="space-between center"><img mat-card-image src="test";alt=测试">
<mat-card-title>测试</mat-card-title><mat-card-content><p>测试</p></mat-card-content><mat-card-actions align="end"></mat-card-actions></mat-card>

我不明白我可以将图像居中(必要时调整其大小).

感谢coreuter的回答，我快要得到我想要的了.

第一个块与其他块的高度不同.我在每一行的末尾都有一些空白区域(我想要每行 5 个元素).

更新后的代码:

<mat-card fxFlex=20"(点击)=addProduct()"；class="mat-card-add-button"><div><span style="font-size:32px;text-align:center">+<br/>添加产品</span>
</mat-card><mat-card fxFlex=20"*ngFor=让产品的产品；让 i = 索引"类别=产品"><img类=图像"mat-card-image src="{{product.picture.uri}}";alt=照片"><mat-card-title>{{product.name}}</mat-card-title><mat-card-content><p>测试</p></mat-card-content><mat-card-actions align="end"></mat-card-actions></mat-card>

编辑 2:

我认为这几乎是完美的.我尝试了 mat-card-content div 里面的大内容，不知道好不好.这是我所拥有的屏幕截图:

您认为按钮与大mat-card(最后一个)的高度相同吗?另一件事，我看不到每行第一个元素的border-left.

这里是更新的代码:

<mat-card fxLayoutAlign="center center"fxFlex=0 1 calc(20% - 20px)"(点击)=addProduct()"；类=产品"样式=高度:413px"><div><span fxLayoutAlign="center center"style="font-size:32px;text-align:center">+<br/>添加产品</span>
</mat-card><mat-card fxFlexFill fxFlex=0 1 calc(20% - 20px)";*ngFor=让产品的产品；让 i = 索引"类别=产品"><img类=图像"mat-card-image src="{{product.picture.uri}}";alt=照片"><mat-card-title>{{product.name}}</mat-card-title><mat-card-content><p *ngIf=i == 3">Lorem ipsum dolor 坐 amet，consectetur adipiscing 精英.Etiam dapibus，leo id pulvinar 前庭，ligula nisl tincidunt magna，eu volutpat leo neque quis justo.Fusce semper ante id mi porta porta.Pellentesque nec pretium purus.Curabitur lobortis tempus consectetur.Nam ullamcorper gravida 年代 sed suscipit.Morbi quis porttitor nunc.Suspendisse lacinia a turpis vitae laoreet.Aliquam pellentesque scelerisque urna.Cras vulputate nisi sed elit commodo cursus.Aenean interdum，erat at convallis dictum，urna enim tincidunt nisi，vitae tempor nisi nisi atellus.Aliquam volutpat dui eget gravida eleifend.Nullam pulvinar justo eget Tellus commodo, eget moestie dui convallis.Curabitur 在fermentum lorem.Maecenas porttitor sem ut enim efficitur bibendum et vel metus.</p><p *ngIf=i != 3">测试</p></mat-card-content><mat-card-actions align="end"><按钮垫图标按钮><mat-icon>mode_edit</mat-icon><按钮垫图标按钮><mat-icon>删除</mat-icon></mat-card-actions></mat-card>