英文:
Center align content in Angular material is not working
问题
我正在使用 Angular 8 和 Angular Material 进行布局。
我有一个带有 progress spinner 的 card。
<mat-card>
<mat-card-content class="text-center">
<mat-progress-spinner class="text-center"
[color]="color"
[mode]="mode">
</mat-progress-spinner>
</mat-card-content>
</mat-card>
它被左对齐。我想要居中对齐。
我尝试使用 CSS 添加 text-center：
.text-center {
text-align: center;
}
但这不起作用。在 Angular Material 中没有预定义的用于对齐内容的 class 吗？
我在Google搜索中找到了一个：https://material.angularjs.org/latest/layout/alignment，但这是针对 Angularjs 版本的。
英文:
I'm using Angular 8 and Angular Material for layout.
I have a card with progress spinner
<mat-card>
<mat-card-content class="text-center">
<mat-progress-spinner class="text-center"
[color]="color"
[mode]="mode">
</mat-progress-spinner>
</mat-card-content>
</mat-card>
It is aligned on the left. I want to align center.
I tried adding text-center with CSS
.text-center {
text-align: center;
}
But this does not work. Isn't there any predefined class for aligning content in the Angular Material?
I found one on Google search: https://material.angularjs.org/latest/layout/alignment, But this is form Angularjs version.
答案1
得分: 3
你可以使用 flex 来实现，将以下 CSS 添加到你的组件中：
mat-card-content {
justify-content: center;
display: flex;
}
英文:
You can do it whit flex, adding this css in your component:
mat-card-content {
justify-content: center;
display: flex;
}
答案2
得分: 0
尝试以下方法：
使用普通的CSS，在mat-progress-spinner标签中添加margin: 0 auto。
这对我有效。
<mat-card>
<mat-card-content>
<mat-progress-spinner style="margin: 0 auto;"
[color]="color"
[mode]="mode">
</mat-progress-spinner>
</mat-card-content>
</mat-card>
英文:
Try the below,
Use normal css, Add margin: 0 auto to the mat-progress-spinner tag.
It worked for me.
<mat-card>
<mat-card-content>
<mat-progress-spinner style="margin: 0 auto;"
[color]="color"
[mode]="mode">
</mat-progress-spinner>
</mat-card-content>
</mat-card>
答案3
得分: 0
尝试这个小技巧。它在stackBlitz中运行良好。
<mat-card>
<div align="center">
<mat-card-content>
<mat-progress-spinner
[color]="color"
[mode]="mode">
</mat-progress-spinner>
</mat-card-content>
</div>
</mat-card>
英文:
Try this small hack. It works in fine in stackBlitz
<mat-card>
<div align="center">
<mat-card-content >
<mat-progress-spinner
[color]="color"
[mode]="mode">
</mat-progress-spinner>
</mat-card-content>
</div>
</mat-card>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论