如何对齐文字<mat-toolbar>有角度的

Question

<mat-toolbar color="primary">
  <mat-toolbar-row>
    <span class="toolbar">Welcome to Conflux Application</span>
  </mat-toolbar-row>
</mat-toolbar>

span {
  text-align: center;
}

以上是工具栏的以下视图/模板和设计，但是“欢迎使用Conflux应用程序”的文字甚至没有居中对齐？

Answer 1

在您的情况下，首先您需要将跨度的宽度设置为 100%，以便其中的文本可以有空间居中。

由于 span 是内联元素，所以我们需要使用 display: inline 块属性，以便我们可以在 width 属性上方设置。

需要更改：

span {
  text-align: center;
  display: inline-block;
  width: 100%;
}

工作示例 URL - https://stackblitz.com/edit/angular-5ptsm7

Answer 2

mat-toolbar 和随后的 mat-toolbar-row 默认显示为 flex。 只需将其添加到您的 css 文件中：

.mat-toolbar-row {
  justify-content: center;
}