How to align the text in <mat-toolbar> in 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;
}

The above are the following view/template and design for toolbar,but the text "Welcome to Conflux Application" is not center aligned even?

Answer 1

In your case, first you need to set the width of span to 100% so that text inside it can have space to be in center.

As span is an inline element, so we need to use display: inline block property so that we can set above width property.

Changes required:

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

Working example URL - https://stackblitz.com/edit/angular-5ptsm7

Answer 2

mat-toolbar, and subsequently, mat-toolbar-row, are displayed flex by default. Simply add this to your css file:

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