Вертикальное выравнивание метки в Angular MatButtonToggle

Question

вот в чем проблема: метки моих переключателей материала не выровнены по вертикали.Мне нужно увеличить размер кнопки и шрифт

HTML:

<mat-button-toggle-group name="fontStyle" aria-label="Font Style">
<mat-button-toggle value="bold">Bold</mat-button-toggle>
<mat-button-toggle value="italic">Italic</mat-button-toggle>
</mat-button-toggle-group>

CSS

.mat-button-toggle {
border-radius: 50px;
margin-left: 8px;
margin-right:8px;
width: 200px;
height: 64px;
background-color:  #616161;
color: #e0e0e0;
font-size: 32px;
padding:0 !important;
}

.mat-button-toggle-checked {
background-color:#f44336;
color: #ffffff;
font-size: 32px;
}

.mat-button-toggle-group {
border: none;
height: 64px;
border-radius: 4px;
padding:0px !important;
}

Спасибо за вашу помощь

Answer 1

Вам также нужно изменить высоту строки:

.mat-button-toggle {
  border-radius: 50px;
  margin-left: 8px;
  margin-right:8px;
  width: 200px;
  height: 64px;
  line-height: 64px;
  background-color:  #616161;
  color: #e0e0e0;
  font-size: 32px;
  padding:0 !important;
}