如何在角度和 css 中对齐文本/内容？

Question

我正在尝试使用 angular 对齐下方展开/折叠问题栏中的文本。下面的代码是 HTML/Angular sn-ps 之一。有不少这样的代码块构成了下图

  <mat-expansion-panel hideToggle>
  <mat-expansion-panel-header>
   <mat-panel-title>
    User Data Management
   </mat-panel-title>
  <mat-panel-description>
   What is an agent?
  </mat-panel-description>
  </mat-expansion-panel-header>
  <p>An agent is an individual hired to liaise with a user via the robot</p>
  </mat-expansion-panel>

CSS

 styles: [

  mat-panel-description {
  color: red;
  align-content: center;
 }

如您所见，即使我已将内容对齐到中心，红色文本也完全不对齐。

有什么建议吗？

Answer 1

我会这样做：

mat-expansion-panel-header {
    display: flex;
    flex-flow: row;
    width: 100%;
    justify-content: space-between;
}
mat-panel-description {
    width: 300px; // im using fixed width so that it will be aligned, maybe there's an other way though
    text-align: center;
}

不确定这是否可行，但值得一试。

Answer 2

从align-content:center; 更改为justify-content:center;。就这些。

更新：mat-panel-title 大小适合内容，所以你需要修复它的宽度：

mat-panel-title {
    width: 50%; //change based on your requirements
}