如何對齊文字<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;
}