如何重新定位 Bootstrap Carousel 图像？

Question

我需要调整幻灯片的大小，以便它们更好地适合屏幕，我设法通过更改 .carousel-item 使用 CSS 调整它们的大小，但现在图像总是出现在页面的左侧，我似乎看不到得到任何东西将它们重新定位到中心。

我主要使用 GetBootstrap 的基本模板，但如果需要，这里是 HTML：

HTML：

        <div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img src="design1.jpg" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
              <img src="design2.jpg" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
              <img src="design3.jpg" 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>

CSS：

.carousel-item {
    height: 700px;
    overflow: clip;
    width: 30%;
}

我尝试在“Carousel-inner”div 的 CSS & Style 标签中使用文本对齐，以及尝试框对齐、位置和对齐项目/对齐内容，所有这些都是我设置的居中或尝试使用建议的值，但似乎没有任何改变。

Answer 1

要使图像在旋转木马中居中，您可以在“.carousel-item”类中使用值为“auto”的 CSS 属性“margin”。这将使项目在其容器内水平居中。这是一个更新的 CSS 代码，应该可以工作：

.carousel-item {
height: 700px;
overflow: clip;
width: 30%;
margin: 0 auto; /* Add this line to center the item */
}

这应该使每个幻灯片图像在其各自的轮播项目中居中。让我知道这是否有帮助！

或

要使图像在轮播中居中，您可以在图像元素上使用 Bootstrap 5 实用程序类“mx-auto”。此类将水平边距设置为“自动”，使元素在其容器内居中。这是更新后的 HTML 和 CSS 代码，应该可以工作：

HTML：

   <div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img src="design1.jpg" class="d-block w-100 mx-auto" alt="...">
            </div>
            <div class="carousel-item">
              <img src="design2.jpg" class="d-block w-100 mx-auto" alt="...">
            </div>
            <div class="carousel-item">
              <img src="design3.jpg" class="d-block w-100 mx-auto" 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>

CSS：

.carousel-item {
height: 700px;
width: 30%;
}

请注意，我从“.carousel-item”类中删除了“overflow: clip”属性，因为它不是有效的 CSS 值。如果需要裁剪轮播项的溢出，可以使用"overflow:hidden"代替。

希望对您有所帮助！