mat-expansion-panel-header标题对齐问题

Question

我已经在我的mat-expansion-panel中添加了一个按钮：Angular Material 7中的mat-expansion-panel-header。

没有按钮，标题的对齐是正确的，但是通过按钮，标题将向上移动。图片链接如下。

我正在使用以下scss将按钮向右移动。

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

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

如何获取标题文本的正常居中位置？

Answer 1

我使用了以下内容：

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

Answer 2

创建CSS类.headers-align并将其添加到您的<mat-accordion class="headers-align">

CSS的代码是这样的：

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