猫头鹰旋转木马在高度不相等时将它们垂直对齐 [英] Owl Carousel align each item vertically when their height not equal

问题描述

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

I am working on a really simple Html/Boostrap website. I am using the owl-carousel library to display and slide multiple paragraphs. The problem is that when displaying on small devices, these paragraphs will not have the same height, depending on how long they are.

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

I would like all my owl-item div or paragraph to be aligned vertically within the owl-wrapper div. I tried few display combinations, and also the owl carousel's autoHeight: true option but it does not work as I except.

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

See the pictures, the little paragraph is displayed on the top of the owl-wrapper div, but I would like it to be centered vertically :

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

推荐答案

将此添加到CSS

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

这篇关于猫头鹰旋转木马在高度不相等时将它们垂直对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！