Center text in angular material MatButtonToggle

I'm trying to customize the MatButtonToggle but have difficulties centering the label :



The template :

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


The style :

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


How can I do that ?

Continue reading...