我用Bootstrap 5創建了下面的布局。在1200像素及以上時，按鈕行按照我的意愿對齊，但當XL斷點到達1199像素時，按鈕會對齊到容器的左側，而不是居中。

小提琴在這里:https://jsfiddle.net/mfen723/xrdcq9g6/11/

盡管使用flexbox使每行內容居中:

<div class="row pb-4 d-flex justify-content-center">
      <div class="col-xl-4">
          <p class="btn btn-warning btn-lg"><a href="resources-art-therapy-clinic.html" class="lit-link">Art Therapy<br>Clinical Literature<br>Source Material</a></p>
      </div>
      <div class="col-xl-4">
           <p class="btn btn-warning btn-lg "><a href="#" class="lit-link">Resilience<br>Spiritual Development</a></p>
      </div>
      <div class="col-xl-4">
            <p class="btn btn-warning btn-lg"><a href="resources-literature-integrative-medicine.html" class="lit-link">Integrative Medicine</a></p>
      </div>
 </div>

我不知道為什么按鈕是左對齊的，所以任何幫助都非常感謝。布局覆蓋在視差背景上，所以我不確定這是否是阻止行內容居中的原因。

p元素靠左對齊，因為父div是全角的，默認情況下元素靠左對齊。將自動邊距應用到此元素的左右兩側，使其居中。在bootstrap中，這是通過將類mx-auto添加到元素& ltp class = & quotBTN BTN-arning BTN-LG & gt；如下所示:

<p class="btn btn-warning btn-lg mx-auto"><a>...</a></p>

這里標記了小提琴

為了對齊flex子div中心，您必須對父div而不是子div本身應用中心屬性:

<div class="col-xl-4" style="display:flex;align-items:center;justify-content: center;">
  <p class="btn btn-warning btn-lg">
      <a href="resources-literature-rudolph-steiner.html" class="lit-link">Rudolph Steiner</a>
  </p>
</div>