更改 Angular 材质下拉列表和文本的默认位置

我试图将材质下拉面板的位置更改为下拉按钮的底部。并尝试将名称和箭头垂直居中到下拉区域。 请浏览一下我想要实现的图像。

<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;
 }

对于选择框下方显示的下拉菜单，请将以下 css 引用添加到panelClass:

.myPanelClass{
    margin: 25px 0px;
}

然后，为了让文本居中，请参考以下 cssclass:

.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>

这是一个工作堆栈闪电战 https://stackblitz.com/edit/angular-khatke-z4uflc?file=styles.css