Изменение позиции по умолчанию для раскрывающегося списка материалов и текста Angular

Question

Я пытаюсь изменить положение раскрывающейся панели «Материал» в нижней части раскрывающейся кнопки. И пытаемся вертикально центрировать имя и стрелку в раскрывающемся списке. Пожалуйста, go через изображение, которое я пытаюсь достичь.

<div class="dropDown">
   <mat-select disableOptionCentering placeholder="Select any value">
     <mat-option *ngFor="let item of list" [value]="item">{{item}}</mat-option>
   </mat-select>
</div>


.dropDown{
 width:200px;
 height:40px;
 background-color: white;
 text-align: center;
 border: 1px solid grey;
 vertical-align: middle;
 }

Answer 1

Для отображения раскрывающегося списка под полем выбора добавьте ссылку css к panelClass:

.myPanelClass{
    margin: 25px 0px;
}

Затем для центрирования текста укажите следующую ссылку css в class:

.mySelectClass {
  padding-top: 12px;
}

, а затем добавьте их в html как так

<div class="dropDown">
   <mat-select disableOptionCentering 
               placeholder="Select any value"
               panelClass="myPanelClass"
               class="mySelectClass">
     <mat-option *ngFor="let item of list" [value]="item">{{item}}</mat-option>
   </mat-select>
</div>

вот рабочий stackblitz