如何将 material 卡片中的图标居中

Question

我是 css 和 angular material 的新手，我想请教如何根据 figma 的设计将图标居中放置在卡片上，我尝试复制 css 来自 figma，但它不会根据设计将图标居中。有谁知道使图标居中的技术？它需要弹性布局吗？为什么 figma 中的 css 实现为 css 和 html 不一样？我只是从 figma 复制粘贴它。感谢您的帮助。

下图中的EG图标是我想放在material卡片中间的。

我现在的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 设计

CSS 来自 Figma Design

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 的实际效果。

如何将 material 卡片中的图标居中

How to center an icon inside a material card

css

angular-material

angular