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

【问题标题】：mat-expansion-panel-header title alignment issuemat-expansion-panel-header 标题对齐问题
【发布时间】：2019-04-09 21:54:31
【问题描述】：

我在 Angular Material 7 中的 mat-expansion-panel: 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;
}

如何让标题文本处于正常、居中的位置？

【问题讨论】：

对齐项目：居中；

标签： html css angular angular-material

【解决方案1】：

我使用了以下内容：

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

【讨论】：

【解决方案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;
   }

【讨论】：