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

【问题标题】：Angular Material Flex Layout - center aligning menu buttonsAngular Material Flex Layout - 居中对齐菜单按钮
【发布时间】：2018-12-10 23:21:48
【问题描述】：

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

我使用<span fxFlex></span>StackBlitz 上的示例创建了一个带有 左对齐 标题和一些 右对齐 链接的 Angular 材质工具栏

效果很好，但是，我无法更改按钮的链接和居中那些（删除标题后）

这里演示的问题：Stackblitz

按钮默认为 100% 宽度，我已将其覆盖为固定宽度，但任何尝试对齐内容或使用 margin:auto 和设置宽度的尝试仍然失败。

更新：添加 mat-menu 时出现问题：查看this example 中 app.component.html 中的 mat-menu 未注释时会发生什么

【问题讨论】：

标签： angular angular-material angular-flex-layout

【解决方案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;
}

【讨论】：

感谢 Jean-baptiste，只要没有子菜单，居中就会以这种方式（或使用 fxFlex）工作。我在这里更新了我的示例：stackblitz.com/edit/… 当您取消注释 mat-menu 时，居中会丢失。有什么想法可以解决这个问题吗？
尝试定位 .mat-menu-item 并在该类上设置您的样式
感谢 Ivan，只要我们不尝试将菜单与 [matMenuTriggerFor] 一起使用 - 按钮触发器就会消失。见stackblitz.com/edit/…
我的错误 - 已更正您认为此解决方案是一种解决方法，还是在任何地方都有记录？
这将是一种解决方法，Angular Material 在其组件方面有明确的指导方针，当然这些都是基于 Material Design 的，所以当你想要更改组件的通常外观和行为时，它几乎总是一个解决方法，但如果它适用于您的用例，请继续

【解决方案2】：

此解决方案将被视为一种解决方法，因为 Material Design 对所有内容的外观和行为都有明确的指导方针，这些指导方针当然也在 Angular Material 中实现，因此您想要进行的任何更改Angular Material 中组件的 looks 和 默认行为 并不完全是推荐，但如果所做的更改对您的用例有益，请不要这样做不要破坏任何东西，我会说继续他们。

基本上我只是针对.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

【讨论】：