Owlカルーセルは、高さが等しくないときに各アイテムを垂直に整列させます。

Question

私は本当にシンプルなHTML/Boostrap Webサイトで作業しています。 私はowl-carouselライブラリを使用して、複数の段落を表示およびスライドします。 小さなデバイスに表示すると、これらの段落の長さによっては、これらの段落の高さが同じにならないという問題があります。

私はすべてのowl-item divまたはparagraphをowl-wrapper div内で垂直に整列させたいと思います。私はディスプレイの組み合わせをいくつか試してみましたが、フクロウカルーセルのautoHeight: trueオプションも試しましたが、それ以外は動作しません。

は写真を参照してください、少し段落は、OWL-ラッパーのdivの最上部に表示されているが、私はそれが縦方向にセンタリングされたい：

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

Answer 1

これをあなたのCSSに追加してください

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