猫头鹰旋转木马在高度不相等时将它们垂直对齐

Question

我正在一个非常简单的HTML / Boostrap网站上工作。我正在使用owl-carousel库来显示和滑动多个段落。问题在于，在小型设备上显示时，这些段落的高度不同，具体取决于它们的长度。

我希望我的所有owl-div div或段落在owl-wrapper div中垂直对齐。我尝试了几种显示组合，还有猫头鹰轮播的autoHeight: true选项，但是除了我以外，它不起作用。

看到图片，小段显示在owl-wrapper div的顶部，但是我希望它垂直居中：

<div class="container">
  <div class="caption text-center text-white" data-stellar-ratio="0.7">
    <div id="owl-intro-text" class="owl-carousel">
      <div class="item">
        <h1>Oscar Götting</h1>
      </div>
      <div class="item">
        <h1>Let's build something together</h1>
      </div>
    </div>
  </div>
</div>

Answer 1

将此添加到您的CSS

.owl-carousel .owl-stage { display: flex; align-items: center; }