I've been working on a project and ran into an issue with the mat-button-toggle-group. When I tried increasing the height of the buttons, the text inside them didn't center properly.
https://i.sstatic.net/47zT1.png
I'm looking for a way to always keep the text in the button group centered vertically, regardless of the button group's height. Any suggestions on how to achieve this?
app.component.html
<div class="parent-div">
<mat-button-toggle-group class="child-mat-button-group" name="favoriteColor" aria-label="Favorite Color">
<mat-button-toggle value="red" class="individual-button1">Red</mat-button-toggle>
<mat-button-toggle value="green" class="individual-button2">Green</mat-button-toggle>
<mat-button-toggle value="blue" class="individual-button3">Blue</mat-button-toggle>
</mat-button-toggle-group>
</div>
app.component.css
.parent-div {
height: 50%;
}
.child-mat-button-group {
height:100%;
}
.individual-button1 {
border:1px solid red;
}
.individual-button2 {
border:1px solid green;
}
.individual-button3 {
border:1px solid blue;
}
edit: Added this in app.component.css
.parent-div {
height: 20%;
}
mat-button-toggle {
display: flex;
}