引导轮播无法正常工作

Question

我正在尝试在我的网站中使用 Bootstrap 轮播，但我无法将内容置于轮播的中心。我尝试过使用 Grid，但效果不佳。我怎么解决这个问题？请查看我的代码和下面提供的图像。我还没有为轮播使用任何 CSS。

<section class="services-about">
                <div id="demo" class="carousel slide" data-ride="carousel">
                    <!-- The slideshow -->
                    <div class="carousel-inner">
                        <!-- The slideshow -->
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <div class="card-columns">
                                    <div class="card card-effects">
                                        <img src="./resources/images/data.png" alt="" class="img-fluid card-img-top mx-5"
                                            style="height: 10%; width: 15%;">
                                        <div class="card-body">
                                            <h3 class="card-title text-center" style="color: #686868 !important;">
                                                WEB DEVELOPMENT
                                            </h3>
                                            <hr style="border: .01px solid #333 !important;">
                                            <p class="card-text text-center"
                                                style="color: rgba(255,255,255,.755) !important;">Lorem
                                                ipsu dolor sit amet consectetur adipisicing
                                                elit.
                                                Consequatur perspiciatis quas exercitationem natus? Magnam molestiae
                                                unde
                                                praesentium, quidem soluta incidunt enim dolore veritatis at quis
                                                molestias
                                                corporis
                                                quod inventore porro!</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <div class="card-columns">
                                    <div class="card card-effects">
                                        <img src="" alt="" class="img-fluid card-img-top">
                                        <div class="card-body">
                                            <h3 class="card-title text-center" style="color: #686868 !important;">
                                                MARKETING</h3>
                                            <hr style="border: .01px solid #333 !important;">
                                            <p class="card-text text-center"
                                                style="color: rgba(255,255,255,.755) !important;">
                                                Lorem
                                                ipsum dolor sit amet consectetur adipisicing
                                                elit.
                                                Consequatur perspiciatis quas exercitationem natus? Magnam molestiae
                                                unde
                                                praesentium, quidem soluta incidunt enim dolore veritatis at quis
                                                molestias
                                                corporis
                                                quod inventore porro!</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Left and right controls -->
                        <a class="carousel-control-prev" href="#demo" data-slide="prev">
                            <span class="carousel-control-prev-icon"></span>
                        </a>
                        <a class="carousel-control-next" href="#demo" data-slide="next">
                            <span class="carousel-control-next-icon"></span>
                        </a>

                    </div>
                </div>
                <div class="carousel-item">
                </div>
                <div class="carousel-item">
                </div>
        </div>

        <!-- Left and right controls -->
        <a class="carousel-control-prev" href="#demo" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </a>
        <a class="carousel-control-next" href="#demo" data-slide="next">
            <span class="carousel-control-next-icon"></span>
        </a>

        </div>
        </section>

Please check this image to see the carousel problem

Answer 1

您应该可以使用position 来做到这一点。

如果你添加：

.carousel-item {
   position: relative;
}

.card {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(50%, 50%);
}

您的内容应该在幻灯片的中间居中。 :)

Answer 2

试试下面的.. 将 style="margin:auto" 添加到卡片

  <div class="card" style="width:400px; margin:auto;">

  <div class="carousel-caption">
    <div class="card-body">
      <h4 class="card-title">John Doe</h4>
      <p class="card-text">Some example text.</p>
      <a href="#" class="btn btn-primary">See Profile</a>
    </div>
    </div>
  </div>