将 mat-expansion-panel 的内容居中 Angular material

Question

我正在尝试将 angular material 扩展面板的内容居中。我最初只是尝试将我的内容包围在 div 中，并使用 align-content: center 和 align-items: center 设置样式。但这似乎不起作用。内容似乎锁定在左侧。我的猜测是有一些 angular material class 我需要用 !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;
}

这使 js 中的 p-tag 居中 fiddle，但是可能还有其他因素阻止了它的工作。

如果您创建一个 StackBlitz 我们可以更轻松地帮助您，而不必全部创建一个应用程序来复制它。

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

我会查看您的代码，如果您愿意，我会更新答案...

Answer 2

您必须覆盖 mat-expansion-panel-body class。你必须用 ::ng-deep 伪 class 来做，因为 view encapsulation:

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

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

将 mat-expansion-panel 的内容居中 Angular material

Center the content of a mat-expansion-panel in Angular material

html

javascript

css

angular-material

angular