Center Text Vertically in Mat-Select

Question

I can't seem to figure out how to get the text to center inside my container div. See the top pic is what I'm trying to accomplish and the bottom is what I have so far.

Here's my code:

@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
})

I've tried adding a flex box, changing the inline style, using vertical alignment but nothing seems to move the text. Any thoughts?

Edit:

.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

You can try adding the below css:

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

Also, you need to remove the line-height property from current css

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

Answer 2

For mat-select you can think to play on the padding (till get the desired height)