如何将img Inide Inide img滑块从Bootstrap Carousel中心？

Question

我在使用Bootstrap 5 IMG滑块旋转木制旋转木制时遇到问题，将IMG居中居中：

<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
        </div>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="../images/1.jpg" class="w-25" alt="...">
            </div>
            <div class="carousel-item">
                <img src="../images/2.jpg" class="w-25" alt="...">
            </div>
            <div class="carousel-item">
                <img src="../images/3.jpg" class="w-25" alt="...">
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" 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="#carouselExampleIndicators" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>

我从： bootstrap carousel

Answer 1

在这里，您已将旋转式物品图像设置为25％。因此，您需要添加旋转式物品的文本对齐中心。您可以为此使用简单的文本中心 bootstrap类。

您的＆lt; div class =“ carousel-inner”＆gt; 代码应如下：

<div class="carousel-inner">
    <div class="carousel-item text-center active">
        <img src="../images/1.jpg" class="w-25" alt="...">
    </div>
    <div class="carousel-item text-center">
        <img src="../images/2.jpg" class="w-25" alt="...">
    </div>
    <div class="carousel-item text-center">
        <img src="../images/3.jpg" class="w-25" alt="...">
    </div>
</div>

Answer 2

在您的CSS中选择每个图像的div及其类，然后写 text-align：中心; 以这种方式被以此为中心。 （只需使用我发送的代码）

.carousel-item{
    text-align: center;
}