居中Angular素材中一个mat-expansion-panel的内容

Question

我试图将我的 angular 材料扩展面板的内容居中。 我最初只是尝试将我的内容包围在一个 div 中，并使用 align-content: center 和 align-items: center 对其进行样式设置。 但这似乎不起作用。 内容似乎锁定在左侧。 我的猜测是有一些 angular 材料 class 我需要覆盖样式 with.important。 但我不确定是哪个。

 .centered-content{ align-content: center align-content: center }

 <mat-accordion> <.-- #docregion basic-panel --> <!-- #docregion hide-toggle --> <mat-expansion-panel hideToggle> <!-- #enddocregion hide-toggle --> <mat-expansion-panel-header> <mat-panel-title> This is the expansion title </mat-panel-title> <mat-panel-description> This is a summary of the content </mat-panel-description> </mat-expansion-panel-header> <div class="centered-content"> <p>This is the primary content of the panel.</p> </div> </mat-expansion-panel> <!-- #enddocregion basic-panel --> </mat-accordion>

Answer 1

.centered-content{
  text-align: center;
}

这使 p-tag 在 js fiddle 中居中，但是可能还有其他事情阻止它工作。

如果您创建一个StackBlitz ，我们可以更轻松地帮助您，而无需创建一个应用程序来重现它。

此外，您问题中的示例 css 可能无法工作，因为它缺少分号。

我会查看您的代码并更新答案，如果您这样做...

Answer 2

您必须覆盖mat-expansion-panel-body class。由于视图封装，您必须使用::ng-deep伪类来完成：

::ng-deep .mat-expansion-panel-body {
  text-align: center;
}

这是工作示例： https://stackblitz.com/edit/angular-ivy-mheq71?file=src%2Fapp%2Fapp.component.css