mat-expansion-panel-header title alignment issue

Question

I have added a button to my mat-expansion-panel: mat-expansion-panel-header in Angular Material 7.

Without the button the alignment of the title is correct but with the button it is shifted upwards. Image link below.

I am using the following scss to move the button to the right.

.right-aligned-header > .mat-content {
    justify-content: space-between;
}

.mat-content > mat-panel-title, .mat-content > mat-panel-description {
  flex: 0 0 auto;
}

How can I get the header text to be in its normal, centered, position?

Answer 1

I used the following:

mat-panel-title {
    justify-content: center !important;
}

Answer 2

Create a CSS class .headers-align and add it to your <mat-accordion class="headers-align">

The code for the CSS is this:

    .headers-align .mat-expansion-panel-header-title,
    .headers-align .mat-expansion-panel-header-description {
      flex-basis: 0;
     }

   .headers-align .mat-expansion-panel-header-description {
     justify-content: space-between;
     align-items: center;
    }

   mat-form-field {
    margin-right: 12px;
   }