Owl Carousel align each item vertically when their height not equal
<p>I'm working on a really simple Html/Bootstrap website.
I'm using <code>owl-carousel</code> 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.</p>
<p>I would like all my <code>owl-item</code> div or paragraph to be aligned vertically within the owl-wrapper div. I tried few display combinations, and also the owl carousel's <code>autoHeight: true</code> option but it does not work as I except.</p>
<p>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:</p>
<p><a href="https://i.stack.imgur.com/myJpS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/myJpS.png" alt="enter image description here" /></a></p>
<p><a href="https://i.stack.imgur.com/zvXGz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zvXGz.png" alt="enter image description here" /></a></p>
<pre><code>&lt;div class=&quot;container&quot;&gt;
    &lt;div class=&quot;caption text-center text-white&quot; data-stellar-ratio=&quot;0.7&quot;&gt;
        &lt;div id=&quot;owl-intro-text&quot; class=&quot;owl-carousel&quot;&gt;
            &lt;div class=&quot;item&quot;&gt;
                &lt;h1&gt;Oscar Götting&lt;/h1&gt;
            &lt;/div&gt;
            &lt;div class=&quot;item&quot;&gt;
                &lt;h1&gt;Let's build something together&lt;/h1&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>