我懂你现在的困扰——用Bootstrap做可展开列表时，移动端标题文字一换行，切换图标就没法和文字保持垂直居中对齐，试了好几种方法都没搞定对吧？结合你给出的代码片段，我给你几个针对性的解决方案：

方案一：用Flexbox（最推荐的现代方式） #

Flexbox天生就是用来解决这种对齐问题的，修改你的.panel-heading样式，把它变成flex容器，让文字和图标自动垂直居中：

.panel-heading {
  position: relative;
  display: flex;
  align-items: center; /* 核心：让所有子元素垂直居中 */
  padding: 10px 15px; /* 保持Bootstrap原有的内边距，可按需调整 */
  gap: 8px; /* 文字和图标之间的间距，根据需求调整 */
}

/* 如果你之前给切换图标加了绝对定位，记得取消它 */
.toggle-icon {
  position: static !important; /* 移除绝对定位，让图标跟着flex布局走 */
  /* 要是用的是Bootstrap自带的折叠图标，也可以保留它的样式，flex会自动处理对齐 */
}

原理很简单：align-items: center会让flex容器里的所有元素在垂直方向上和容器的中线对齐，不管文字换多少行，图标都会稳稳地和文字的中心对齐。

方案二：调整绝对定位的图标位置（兼容旧浏览器） #

如果你的项目需要兼容不支持Flexbox的旧浏览器，可以用绝对定位+transform的组合来实现精准居中：

.panel-heading {
  position: relative;
  padding-right: 30px; /* 给右侧的图标留出足够空间，避免文字被遮挡 */
  line-height: 1.6; /* 调整行高，让换行后的文字垂直分布更均匀 */
}

.toggle-icon {
  position: absolute;
  right: 15px; /* 和.panel-heading的右侧内边距对应 */
  top: 50%; /* 先把图标顶部定位到容器垂直中点 */
  transform: translateY(-50%); /* 向上移动图标自身高度的50%，实现完全居中 */
}

这种方法的好处是不依赖新布局特性，不管.panel-heading因为文字换行变成多高，图标都会自动跟着居中，不会错位。

方案三：排查Bootstrap默认样式冲突 #

有时候Bootstrap自带的.panel-heading样式（比如默认的line-height、padding）可能会干扰对齐效果，你可以尝试重置这些属性：

.panel-heading {
  position: relative;
  line-height: 1.5; /* 替换成适合你字体大小的行高 */
  padding: 0.75rem 1.25rem; /* 确保内边距足够，避免文字和图标挤在一起 */
}

测试的时候记得打开浏览器的移动端调试模式，多试几种不同长度的标题文字，确保换行和不换行的情况都能正常对齐。

内容的提问来源于stack exchange，提问作者Shawn.Y