CODEWITHSUNDEEP
htmlcsstwitter-bootstrapowl-carousel
Scaraux
Scaraux

Reputation: 4152

Owl Carousel align each item vertically when their height not equal

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>

Upvotes: 2

Views: 7787

Answers (1)

Pradeep Sambandam
Pradeep Sambandam

Reputation: 683

Add this to your CSS 

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

Upvotes: 16

Related Questions