在Mat-Select中垂直居中文本

Question

我似乎无法弄清楚如何使文本在容器div中居中。看到最上面的图片是我要完成的工作，最下面的是我到目前为止所要做的。

这是我的代码：

@Component({
 selector: 'app-repair-status',
 template: `
<mat-form-field>
  <mat-select [(value)]="job.status" (selectionChange)="statusChanged()" class="repair-status-select">
    <mat-option *ngFor="let status of statuses" [value]="status.code">
      {{ status.description }}
    </mat-option>
  </mat-select>
</mat-form-field>
`,
 styleUrls: ['./status.component.css'],
 encapsulation: ViewEncapsulation.None
})

我尝试过添加一个弹性框，使用垂直对齐方式更改内联样式，但似乎没有什么可以移动文本。有什么想法吗？

编辑：

.repair-status-select {
  color: #4980b3;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.mat-select-value-text {
  color: #4980b3;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

Answer 1

您可以尝试添加以下CSS：

.mat-option .mat-option-text{
  flex-grow: 1;
  display: flex;
  align-items: center;
}

此外，您需要从当前的CSS中删除line-height属性

.repair-status-select,
.mat-select-value-text {
  color: #4980b3;
  font-size: 16px;
  font-weight: 600;
}

Answer 2

对于ma​​t-select，您可以考虑在padding（直到获得所需的高度）