title: Owl Carousel align each item vertically when their height not equal
body: <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>