Owl Carousel 在高度不相等时垂直对齐每个项目

Posted 2023-05-07

【中文标题】Owl Carousel 在高度不相等时垂直对齐每个项目

【英文标题】：Owl Carousel align each item vertically when their height not equal

【发布时间】：2017-01-12 05:12:43

【问题描述】：

我正在开发一个非常简单的 html/Bootstrap 网站。 我正在使用owl-carousel 库来显示和滑动多个段落。 问题是在小型设备上显示时，这些段落的高度不同，具体取决于它们的长度。

我希望我的所有owl-item div 或段落在 owl-wrapper div 内垂直对齐。我尝试了几种显示组合，以及猫头鹰轮播的autoHeight: true 选项，但它不能像我一样工作。

看图片，小段显示在owl-wrapper 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>

【问题讨论】：

这能回答你的问题吗？ How to center the images in the Owl Carousel

【参考方案1】：

将此添加到您的 CSS

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