2

I'm working on a really simple Html/Bootstrap website. I'm using 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:

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>
Asef Hossini
  • 655
  • 8
  • 11
Scaraux
  • 3,841
  • 4
  • 40
  • 80
  • Does this answer your question? [How to center the images in the Owl Carousel](https://stackoverflow.com/questions/39164738/how-to-center-the-images-in-the-owl-carousel) – G_real Nov 12 '19 at 23:09

1 Answers1

16

Add this to your CSS 

.owl-carousel .owl-stage { display: flex; align-items: center; }
Pradeep Sambandam
  • 685
  • 4
  • 10