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

Question

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

我创建了一个 Angular Material 工具栏，其中 左对齐 标题和一些 右对齐 链接使用 <span fxFlex></span> StackBlitz

上的例子

效果很好，但是，我无法更改指向按钮和 center 按钮的链接（删除标题后）

此处显示的问题：Stackblitz

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

更新：添加mat-menu时出现问题：看看mat-menu在app.component.html中取消注释时会发生什么[=14] =]

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

此解决方案将被视为 解决方法，因为 Material 设计对所有内容的外观和行为都有明确的指导方针，这些指导方针当然也在 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-Whosebug-218rt2

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

Angular Material Flex Layout - center aligning menu buttons

angular-material

angular-flex-layout

angular