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

Issue

I’m trying to center the content of my angular material expansion panel. I initially just tried surrounding my content in a div and style it with align-content: center and align-items: center. But that doesn’t seem to work. The content seems locked on the left side. My guess is there’s some angular material class I need to override the styling with !important. But I’m not sure which.

.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>

Solution

You have to override the mat-expansion-panel-body class. You have to do it with ::ng-deep pseudo-class because of the view encapsulation:

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

Here is the working example: https://stackblitz.com/edit/angular-ivy-mheq71?file=src%2Fapp%2Fapp.component.css

Answered By – NeNaD

Answer Checked By – Katrina (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.