Блог

после того, как я увеличил размер своей карточки matcard до 10 пикселей, заголовок вышел из положения и больше не находится прямо в середине карточки. Я пытался использовать position и top в css, но ничего не получалось. любое предложение или помощь будут действительно оценены.

     <mat-card class="alert" *ngIf="showBroadcast">
      <mat-card-title *ngFor="let help of broadcastText | async">
          <p style="font-size: 15px; color: black; top: 194px;">{{getMessage(help)}}</p>
      </mat-card-title>
    </mat-card>

  

 .alert{
  margin-bottom: 10px;
  background-color:  #D2232B;
  border-radius: 6px;
  opacity: 1; 
  height: 10px;
}
  

Отобразить контейнер как flex и выровнять элементы по центру:

https://stackblitz.com/edit/angular-mat-card-example-nm6ywr?file=src/app/app.component.css

 .alert{
  margin-bottom: 10px;
  background-color:  #D2232B;
  border-radius: 6px;
  opacity: 1; 
  height: 10px;
  display: flex;
  align-items: center;
}