css - Angularで<mat-toolbar>のテキストを揃える方法

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

span {
  text-align: center;
}

上記はツールバーのビュー/テンプレートおよびデザインですが、テキスト「Welcome to Conflux Application」が中央に揃っていませんか？

回答 #1

あなたの場合、まずspanの幅を100%に設定する必要があります。そうすることで、その中のテキストが中央に配置されるスペースを持つことができます。

span はインライン要素であるため、上記の width プロパティを設定できるように、display: inline-block プロパティを使用する必要があります。

必要な変更:

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

動作する例のURL - https://stackblitz.com/edit/angular-5ptsm7

回答 #2

mat-toolbar、およびその後の mat-toolbar-row は、デフォルトで flex として表示されます。単にこれを CSS ファイルに追加してください:

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