Angular材质扩展板Alignment

Question

我想将图标对齐到扩展面板的左侧并将标题对齐到中心。 我在使用 CSS 时遇到问题，因为文本对齐似乎效果不佳。 我欢迎任何建议，谢谢。

<mat-accordion>
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title >
        <app-icon-button></app-icon-button>
        {{title}}
      </mat-panel-title>
      <!-- <mat-panel-description></mat-panel-description> -->
    </mat-expansion-panel-header>
    <p>hello</p>
  </mat-expansion-panel>
</mat-accordion>

Answer 1

你可以这样做：

 <mat-accordion>
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title class="panelTitle">
        <app-icon-button></app-icon-button>
        {{title}}
      </mat-panel-title>
      <!-- <mat-panel-description></mat-panel-description> -->
    </mat-expansion-panel-header>
    <p>hello</p>
  </mat-expansion-panel>
</mat-accordion>

在 .scss 文件中：

.panelTitle{
    display:flex;
    flex-direction:row;
    align-items:center;
    }

如果样式仍未应用，请将encapsualtion:viewEncapsulation.None添加到组件装饰器。

希望这对你有用