Angular Material Flex Layout-居中对齐菜单按钮

Question

按钮如何在材质工具栏中居中对齐？

我使用StackBlitz 上的<span fxFlex></span>示例创建了一个角度材质工具栏，标题为左对齐，链接为

右对齐这很好，但是，我不能更改按钮的链接，中心那些(删除标题后(

此处演示的问题：Stacklitz

按钮默认为100%宽度，我已经将其覆盖为固定宽度，但任何调整内容或使用边距的尝试都失败了：设置宽度的自动。

更新：添加mat菜单时会出现问题：在本例中，查看app.component.html中取消注释mat菜单时会发生什么

Answer 1

这就是你想要得到的吗？

Html:

<span class="spacer"></span>
<button mat-menu-item>home</button>
<button mat-menu-item [matMenuTriggerFor]="tags" #tagsTrigger="matMenuTrigger" (mouseenter)="tagsTrigger.openMenu()">tags</button>
<button mat-menu-item [matMenuTriggerFor]="points">points</button>
<button mat-menu-item [matMenuTriggerFor]="profile">profile</button>
<button mat-menu-item>sign out</button>
<span class="spacer"></span>

Css:

.spacer {
flex: 1 1 auto;
}

Answer 2

该解决方案将被视为解决方案，因为材料设计对所有东西的外观和行为都有明确的指导方针，这些指导方针当然也在Angular Material中实现，因此，您想要对Angular Material中组件的外观和默认行为进行的任何更改都不完全是推荐的，但如果所做的更改有利于您的用例，并且不会破坏任何东西，我会说继续进行。

基本上，我只是针对.mat-menu-item并设置适当的样式：

.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