How can buttons be center aligned in a material Toolbar?
I've created an Angular Material Toolbar with a left aligned title and some right aligned links using <span fxFlex></span> example on StackBlitz
That works great, however, I can't change the links to buttons and center those (after removing title)
Problem demonstrated here: Stackblitz
Buttons default to 100% width and I've overridden that to fixed width, but still any attempt to justify-content or use margin:auto with set width fails.
Update: the issue arises when mat-menu is added: See what happens when mat-menu is uncommented in app.component.html in this example
This solution would be considered a workaround since Material Design has clear guidelines on how everything should look and behave, these guidelines are of course implemented as well in Angular Material, thus any change you want to make to the looks and default behavior of the components in Angular Material are not exactly recommended, but if the changes made benefit your use case and don't break anything, I'd say go ahead with them.
Basically I just targeted .mat-menu-item and set the appropriate styles:
.mat-menu-item {
width: unset;
height: unset;
line-height: unset;
padding: 0 10px;
border: 1px solid black
}
https://stackblitz.com/edit/free-vote-angular-material-menu-stackoverflow-218rt2