CODEWITHSUNDEEP
cssangulartypescriptangular-material
Aashiq
Aashiq

Reputation: 497

How to align the text in <mat-toolbar> in angular

<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?

Upvotes: 3

Views: 6051

Answers (2)

murphworm
murphworm

Reputation: 91

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

Upvotes: 1

Jasdeep Singh
Jasdeep Singh

Reputation: 8301

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

Upvotes: 5

Related Questions