如何以角度对齐 <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

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

由于span是一个内联元素，所以我们需要使用display: inline块属性，以便我们可以设置上面的宽度属性。

需要改变：

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

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