[英]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?以上是工具栏的以下视图/模板和设计,但是“欢迎使用Conflux应用程序”的文字甚至没有居中对齐?
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.在您的情况下,首先您需要将跨度的宽度设置为 100%,以便其中的文本可以有空间居中。
As span is an inline element, so we need to use display: inline block property so that we can set above width property.由于 span 是内联元素,所以我们需要使用 display: inline 块属性,以便我们可以在 width 属性上方设置。
Changes required:需要更改:
span {
text-align: center;
display: inline-block;
width: 100%;
}
Working example URL - https://stackblitz.com/edit/angular-5ptsm7工作示例 URL - https://stackblitz.com/edit/angular-5ptsm7
mat-toolbar, and subsequently, mat-toolbar-row, are displayed flex by default. mat-toolbar 和随后的 mat-toolbar-row 默认显示为 flex。 Simply add this to your css file:只需将其添加到您的 css 文件中:
.mat-toolbar-row {
justify-content: center;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.