Question

我做了大约2个小时的搜索，尝试了超过15个解决方案，但没有一个有效。我有一个光滑的滑块如下：

       <section id="testimonial-section" class="pt-4 pb-0 px-4 bg-dark text-white">
            <div class="container">
                <h2 class="text-center mb-4">Student Evaluations</h2>
                <div class="row">
                    <div class="col slide-col">
                        <div class="slider">
                            <div>
                                <blockquote class="blockquote text-center">
                                    <p class="mb-0">"Text Paragraph 1"</p>
                                </blockquote>
                            </div>
                            <div>
                                <blockquote class="blockquote text-center">
                                    <p class="mb-0">"Text paragraph 2."</p>
                                </blockquote>
                            </div>
                            <div>
                                <blockquote class="blockquote text-center">
                                    <p class="mb-0">"Text paragraph 3."</p>
                                </blockquote>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

我需要每个无类div在包含的滑块框架中垂直居中，因为它显示在屏幕上。现在，这些div被推到滑块的顶部，在底部留下了许多不必要的空间。

我尝试在滑块本身上使用d-flex，并在每个无类align-items-center上使用align-self-center和div。

我还尝试将slider显示为内联块，并在每个类my-auto上使用div命令。

我也尝试使用table cell无效。

这些是迄今为止最常见的建议。

有没有'bootstrappy'方法可以快速解决这个问题？有没有内置的光滑滑块方法来解决这个问题？如果两个问题都没有，那么最简单的方法是什么？

编辑：上面已发布完整的section。没有额外的CSS或JS影响section。在无类test1和div本身上还有slider课，以确定出了什么问题，但我把它留在了这里，因为它不会成为决赛的一部分码。它在无类div上放置一个小的红色边框，滑块div立即将其括起来，产生下面的图片（例如）：

正如你所看到的那样，无类别的div被推到了滑块div的顶部。

Answer 1

Codepen：https://codepen.io/webdevdani/pen/KXJqKb

由于您说滑块中有剩余空间，我假设它有一个高度。

这是一个简单的解决方案，只需在滑块上添加几个Bootstrap4类：

<div class="row">
  <div class="col">
    <div class="slider d-flex justify-content-center align-items-center h-100">
        <div>
          <blockquote class="blockquote text-center">
            <p class="mb-0">"This is a bunch of random works, and each slide is of varying length."</p>
          </blockquote>
        </div>
        <div>
          <blockquote class="blockquote text-center">
            <p class="mb-0">"This is a bunch of random works, and each slide is of varying length.""This is a bunch of random works, and each slide is of varying length."</p>
          </blockquote>
        </div>
        <div>
          <blockquote class="blockquote text-center">
            <p class="mb-0">"This is a bunch of random works, and each slide is of varying length.""This is a bunch of random works, and each slide is of varying length.""This is a bunch of random works, and each slide is of varying length.""This is a bunch of random works, and each slide is of varying length."</p>
          </blockquote>
        </div>
    </div>
  </div>
</div>

在我的codepen中添加了样式：

.col {
    height: 400px; // Random, taller height for example
}

添加的flexbox助手类的文档：https://v4-alpha.getbootstrap.com/utilities/flexbox/

使用Bootstrap 4 Beta在Slick Slide中垂直对齐幻灯片

1 个答案: