我正在开发一个非常简单的 Html/Bootstrap 网站。
我正在使用 owl-carousel
库来显示和滑动多个段落。
问题是在小型设备上显示时,这些段落的高度不会相同,具体取决于它们的长度。
我希望我所有的 owl-item
div 或段落在 owl-wrapper div 中垂直对齐。我尝试了几种显示组合,以及 Owl Carousel 的 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>
最佳答案
将此添加到您的 CSS 中
.owl-carousel .owl-stage { display: flex; align-items: center; }
关于html - Owl Carousel 在高度不相等时垂直对齐每个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39320305/