首页 文章

Owl Carousel在高度不相等时垂直对齐每个项目

提问于
浏览
1

我正在开发一个非常简单的Html / Boostrap网站 . 我正在使用owl-carousel库来显示和滑动多个段落 . 问题是,当在小型设备上显示时,这些段落的高度将不同,具体取决于它们的长度 .

我希望我的所有owl-item div或段落在owl-wrapper div中垂直对齐 . 我尝试了几个显示组合,还有猫头鹰旋转木马的 autoHeight: true 选项,但它不能像我一样工作 .

看到图片,小段落显示在猫头鹰包装div的顶部,但我希望它垂直居中:

enter image description here

enter image description here

<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>

1 回答

  • 5

    将其添加到您的CSS中

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

相关问题