Angular自定义Expansion Panel：折叠居中/展开顶部对齐CSS实现

你要实现的是折叠面板标题栏的图标在折叠时和文本、按钮垂直居中，展开后固定在顶部，核心是动态控制布局对齐方式，或者给图标单独设置定位，下面给两种实用方案：

方案一：动态切换容器对齐属性 #

通过Angular的ngClass绑定展开状态，动态修改标题容器的align-items属性，折叠时居中，展开时顶部对齐：

模板代码 #

<div class="panel-header" [ngClass]="{'expanded': isExpanded}">
  <span class="start-icon">📌</span>
  <!-- 展开时显示的文本 -->
  <div class="panel-text" *ngIf="isExpanded">
    这里是展开后要显示的文本内容，支持多行换行
  </div>
  <button class="toggle-btn" (click)="isExpanded = !isExpanded">
    {{ isExpanded ? '折叠' : '展开' }}
  </button>
</div>

组件逻辑 #

在组件类里维护展开状态变量：

isExpanded = false;

CSS样式 #

.panel-header {
  display: flex;
  gap: 12px;
  padding: 16px;
  border: 1px solid #e0e0e0;
  cursor: pointer;
  /* 折叠状态默认垂直居中 */
  align-items: center;
}

/* 展开状态切换为顶部对齐 */
.panel-header.expanded {
  align-items: flex-start;
}

.start-icon {
  /* 固定图标宽度，避免文本换行时图标位置偏移 */
  width: 24px;
  height: 24px;
}

.panel-text {
  flex: 1;
  margin-top: 8px; /* 展开后和图标拉开一点间距 */
  line-height: 1.5;
}

方案二：图标绝对定位（固定左上角） #

如果需要图标始终固定在标题栏左上角，不受其他元素布局影响，可以用绝对定位实现：

模板代码 #

<div class="panel-header" [ngClass]="{'expanded': isExpanded}">
  <span class="start-icon">📌</span>
  <div class="panel-content">
    <div class="panel-text" *ngIf="isExpanded">
      这里是展开后要显示的文本内容，支持多行换行
    </div>
    <button class="toggle-btn" (click)="isExpanded = !isExpanded">
      {{ isExpanded ? '折叠' : '展开' }}
    </button>
  </div>
</div>

CSS样式 #

.panel-header {
  position: relative;
  padding: 16px 16px 16px 48px; /* 给左侧图标预留空间 */
  border: 1px solid #e0e0e0;
  cursor: pointer;
}

.start-icon {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 24px;
  height: 24px;
}

.panel-content {
  display: flex;
  flex-direction: column;
  align-items: center; /* 折叠状态下内容居中 */
}

/* 展开后内容左对齐，和图标顶对齐 */
.panel-header.expanded .panel-content {
  align-items: flex-start;
}

.panel-text {
  margin-bottom: 12px;
  line-height: 1.5;
}

方案选择 #

• 方案一适合图标跟着标题栏的布局流动，展开后和文本顶部对齐，整体布局更连贯；
• 方案二适合图标需要固定在左上角，不管内容怎么变化都不移动的场景。

内容的提问来源于stack exchange，提问作者LeO