Owl Carousel align each item vertically when their

问题:

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.

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.

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>

回答1:

Add this to your CSS

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