Bootstrap轮播中Material Symbols Rounded后退图标无法水平居中问题

使用Material Symbols Rounded图标搭配Bootstrap框架实现图片轮播的前进/后退箭头按钮时，前进箭头可在span容器内水平居中，但后退箭头无法实现该效果。相关代码如下：

<button class="carousel-control-next">
  <span class="carousel-control-next-icon" aria-hidden="true">
    <span class="material-symbols-rounded">
      arrow_forward_ios
    </span>
  </span>
</button>

<button class="carousel-control-prev">
  <span class="carousel-control-prev-icon" aria-hidden="true"> 
    <span class="material-symbols-rounded">
      arrow_back_ios
    </span>
  </span>
</button>

.carousel-control-prev > span {
    background-color: white;
    border: solid 1px #F0F0F0;
    width: 40px;
    height: 40px;
    line-height: 38px;
    border-radius: 50%;
    color: var(--primary-color);
    display: flex;
    justify-content: center;
    align-items: center;
}

解决方法 #

问题根源是Bootstrap的.carousel-control-prev-icon类自带默认的background-image样式，同时可能存在默认内边距或定位规则，干扰了内部图标的居中布局。按以下步骤修复：

1. 移除Bootstrap默认箭头背景
   因为我们使用Material图标替代默认箭头，需要清除默认的背景图样式：

   .carousel-control-prev-icon, .carousel-control-next-icon {
       background-image: none;
   }
   

2. 统一前后按钮容器样式
   之前的自定义样式仅作用于后退按钮的span，需同步应用到前进按钮，保证布局规则一致：

   .carousel-control-prev > span, .carousel-control-next > span {
       background-color: white;
       border: solid 1px #F0F0F0;
       width: 40px;
       height: 40px;
       line-height: 38px;
       border-radius: 50%;
       color: var(--primary-color);
       display: flex;
       justify-content: center;
       align-items: center;
   }
   

3. 修正图标默认样式（可选）
   若Material图标自带默认边距导致偏移，可添加以下样式重置：

   .material-symbols-rounded {
       margin: 0;
       display: inline-block;
   }
   

完成以上调整后，flex布局即可正确将前后箭头图标在容器内水平居中。

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