如何在 Bootstrap 5 中水平居中列中的项目

Question

我创建了一个只有 2 列的网格系统。第一个是文本，第二个是我包含的旋转木马。我已将图像大小设置为轮播图像的自定义。无论我做什么，我都无法将 column 中的旋转木马图像水平居中。

.title-sec {
  color: #fff;
  padding-top: 100px;
  padding-bottom: 100px;
}

.carousel {
  width: 400px;
  height: auto;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container title-sec">
  <div class="row">
    <div class="col text-center my-auto">
      <h1 class="heading1"> Sample Text</h1>
      <h2 class="heading2">Sample Breifing</h2>
    </div>
    
    <div class="col m-auto">
      <div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="https://via.placeholder.com/300" class="d-block w-100" alt="...">
          </div>
          
          <div class="carousel-item">
            <img src="https://via.placeholder.com/300" class="d-block w-100" alt="...">
          </div>
          
          <div class="carousel-item">
            <img src="https://via.placeholder.com/300" class="d-block w-100" alt="...">
          </div>
        </div>
        
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
         </button>

         <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Answer 1

您需要将居中应用到轮播，而不是容器（除非您应用 flexbox，这并不是真正需要的）。

我把 .mx-auto 放在 .carousel 上。

.title-sec {
  color: #fff;
  padding-top: 100px;
  padding-bottom: 100px;
}

.carousel {
  width: 400px;
  height: auto;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container title-sec">
  <div class="row">
    <div class="col text-center my-auto">
      <h1 class="heading1"> Sample Text</h1>
      <h2 class="heading2">Sample Breifing</h2>
    </div>
    
    <div class="col bg-secondary">
      <div id="carouselExampleFade" class="carousel slide carousel-fade mx-auto" data-bs-ride="carousel">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="https://via.placeholder.com/600" class="d-block w-100" alt="...">
          </div>
          
          <div class="carousel-item">
            <img src="https://via.placeholder.com/600" class="d-block w-100" alt="...">
          </div>
          
          <div class="carousel-item">
            <img src="https://via.placeholder.com/600" class="d-block w-100" alt="...">
          </div>
        </div>
        
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
         </button>

         <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

如何在 Bootstrap 5 中水平居中列中的项目

How to center items inside a col horizontally in Bootstrap 5

html

javascript

css

twitter-bootstrap

bootstrap-5