Центр текста в угловом материале MatButtonToggle

Question

Я пытаюсь настроить MatButtonToggle, но возникают трудности с центрированием метки:

Шаблон:

<mat-button-toggle-group name="condition" aria-label="Condition">
  <mat-button-toggle value="and" checked>
    <div>ET</div>
  </mat-button-toggle>
  <mat-button-toggle value="or">OU</mat-button-toggle>
</mat-button-toggle-group>

Стиль:

.mat-button-toggle-checked {
  background-color: $secondary-color;
  color: white;
}

mat-button-toggle-group {
  height: 25px;
  border-radius: 4px;
  border: solid 1px $secondary-color;
}

mat-button-toggle {
  font-size: 15px;
  background-color: white;
  color: $secondary-color;
}

Как я могу это сделать?

Answer 1

добавьте это:

.mat-button-toggle-label-content{
  line-height: 0px !important;
  padding: 12px 10px 10px 10px !important
}

в ваш styles.css файл вашей папки src.

и в вашем html удалите <div>:

<mat-button-toggle-group name="condition" aria-label="Condition">
  <mat-button-toggle value="and" checked>ET</mat-button-toggle>
  <mat-button-toggle value="or">OU</mat-button-toggle>
</mat-button-toggle-group>

DEMO