如何在Bootstrap 5小屏中居中对齐指定Flex布局文本？

问题分析 #

你当前的代码里，链接用了d-flex justify-content-between，在小屏幕上会让左侧的「图标+文本」块和右侧的箭头块左右分布，文本自然跟着图标左偏，达不到居中效果。

两种实现方案 #

方案1：不新增div，用响应式类调整

修改链接和内部div的class，通过Bootstrap的响应式对齐类，让小屏幕下文本居中，大屏幕保持原有布局：

<div class="col-6 col-md-4 col-lg-3 col-xl-2 my-3">
  <a href="#" title="Falazóhabarcs" class="main_category d-flex align-items-center radius p-3 justify-content-md-between justify-content-center">
    <div class="text-center text-md-start">
      <i class="fa fa-th-list me-2"></i>Gépi alapvakolat
    </div>
    <div class="d-md-block d-none">
      <i class="fa fa-chevron-right"></i>
    </div>
  </a>
</div>

• justify-content-md-between justify-content-center：大屏幕用左右分布，小屏幕整体居中
• text-center text-md-start：小屏幕文本居中，大屏幕文本左对齐
• d-md-block d-none：小屏幕隐藏箭头（如果不需要隐藏可以去掉这个类，不过小屏幕居中时箭头会跟在文本块右侧，可能影响视觉）

方案2：改用三div结构，精准控制元素位置

如果希望小屏幕下图标、文本、箭头仍保持左、中、右的布局，建议改成三个div的结构，这样更灵活：

<div class="col-6 col-md-4 col-lg-3 col-xl-2 my-3">
  <a href="#" title="Falazóhabarcs" class="main_category d-flex align-items-center radius p-3">
    <div>
      <i class="fa fa-th-list me-2"></i>
    </div>
    <div class="flex-grow-1 text-center text-md-start">
      Gépi alapvakolat
    </div>
    <div>
      <i class="fa fa-chevron-right"></i>
    </div>
  </a>
</div>

• 拆分出单独的图标、文本、箭头div
• flex-grow-1让文本块占据剩余空间，配合text-center实现文本居中
• text-md-start确保大屏幕下文本左对齐，和原有效果一致

总结 #

不需要强制用三个div，但三div结构的布局逻辑更清晰，适配性更强。如果只是想让文本在小屏幕居中，方案1更简洁；如果要保留图标、文本、箭头的左右分布，方案2更合适。

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