Bootstrap 5手风琴按钮文本居中且保留右侧箭头的实现方案

你之前用d-block导致箭头消失，是因为Bootstrap的.accordion-button默认是flex布局，右侧的展开/收起箭头依赖这个布局来定位，改成block会直接破坏箭头的定位逻辑，自然就看不到了。

给你两种靠谱的解决办法：

方法一：自定义CSS（全局生效） #

直接修改.accordion-button的flex对齐方式，同时固定箭头的位置：

.accordion-button {
  justify-content: center; /* 让按钮内的内容整体居中 */
  position: relative;
}

.accordion-button::after {
  position: absolute;
  right: 1rem; /* 把箭头固定在右侧，和默认位置一致 */
}

这种方式适合所有手风琴按钮都需要这个效果的场景。

方法二：用Bootstrap内置类（单个按钮生效） #

不需要写额外CSS，只需要调整按钮内部的结构，用内置类实现：

<button class="accordion-button d-flex align-items-center" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
  <span class="w-100 text-center">Accordion Item #1</span>
</button>

原理是让文本所在的span占满按钮宽度，文本居中，箭头作为flex布局的另一项，自然被挤到右侧，完美保留默认的展开/收起逻辑。

两种方法都能实现文本居中且箭头不消失的效果，根据你的需求选就行。

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