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