如何使素材卡内的图标居中答案

【问题标题】：How to center an icon inside a material card如何使素材卡内的图标居中
【发布时间】：2021-07-19 17:49:31
【问题描述】：

我只是 css 和 angular material 的新手，我想请教我们如何根据 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

【问题讨论】：

.name-icon 存在吗？它在您的 CSS 中，但您的 HTML 中没有任何元素具有该类名。我看到有一个class="icon"

标签： css angular angular-material

【解决方案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 正在使用中。

【讨论】：