css - 如何以 Angular 对齐 中的文本

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;
}

以上是下面的view/template和toolbar的设计，但是“Welcome to Conflux Application”的文字竟然没有居中对齐？

Answer 1

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

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

需要更改:

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

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