Блог

Я просто новичок в css и в угловых материалах ,я хотел попросить помощи , как мы можем центрировать значок на карте на основе дизайна из figma, я попытался скопировать css из figma, но он не центрирует значок на основе дизайна. Кто-нибудь знает методы центрирования значка ? нужна ли для этого гибкая компоновка ? почему css из figma, когда я внедряю его в css и html, не совпадает ? Я просто скопировал его с 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 amp;amp; 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

Добро пожаловать в 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;
}
 

Вот как это выглядит:

И вот его стопка в действии.