css - 如何使素材卡内的图标居中

Question

我只是css和角度材料的新手，我想问一下我们如何根据figma的设计将图标居中在卡片上，我尝试从figma复制css但它没有基于图标居中设计。有谁知道使图标居中的技术？它需要弹性布局吗？为什么当我将 figma 实现为 css 和 html 时的 css 不一样？我只是从figma复制粘贴的。谢谢你的帮助。

下图中的EG图标是我想放在材料卡里面的中心。

我当前的 CSS

.custom.mat-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px 16px 32px;
  position: static;
  width: 448px;
  height: 527px;
  margin-left: 142px;
  margin-top: 64px;
  background: #ffffff;
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px rgba(0, 0, 0, 0.14), 0px 1px 5px rgba(0, 0, 0, 0.12);
  border-radius: 4px;
}

.name-icon {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px;

  position: static;
  left: 28.81%;
  right: 28.81%;
  top: 0%;
  bottom: 49.21%;
  flex: none;
  order: 0;
  flex-grow: 0;
  margin: 8px 0px;
}

我当前的 HTML 代码

 <div>
      <mat-card class="custom">
           <app-user-profile-icon class="icon" 
                *ngIf="this.data.firstName && this.data.lastName" 
                [firstName]="this.data.firstName"
                [lastName]="this.data.lastName"
                [size]="32"
                style="padding-right: 8px;">
           </app-user-profile-icon>
      </mat-card>
 </div>

Figma 设计

Figma 设计的 CSS

标签： cssangularangular-material

Answer 1

欢迎来到 S/O :)

你想要align-items: center而不是align-items: flex-start.

.custom.mat-card {
  display: flex;
  flex-direction: column;
  align-items: center;           /*  This  */
  /* align-items: flex-start; */ /*  Instead of this */
  padding: 16px 16px 32px;
  position: static;
  width: 448px;
  height: 527px;
  margin-left: 142px;
  margin-top: 64px;
  background: #ffffff;
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px rgba(0, 0, 0, 0.14), 0px 1px 5px rgba(0, 0, 0, 0.12);
  border-radius: 4px;
}

这是它的样子：

这是一个StackBlitz的实际应用。