Question

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

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

效果很好，但是，我不能更改按钮的链接，而不能将按钮的链接居中（在删除标题后）

问题在此处显示：Stackblitz

按钮的默认宽度为100％，但我已将其改写为固定宽度，但是任何试图证明内容合理或使用margin：auto设置宽度的尝试都失败了。

更新：添加 mat-menu 时出现问题：查看this example

中app.component.html中未注释mat-menu时会发生什么情况

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 Design对于所有外观和行为都有明确的指导原则，这些指导原则当然也已在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

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

2 个答案: