jquery - 如何在中间显示owlCarousel2滑块内容？

我正在使用owlCarousel2插件（https://owlcarousel2.github.io/OwlCarousel2/demos/demos.html）。一切工作正常，但问题出在内容上。我有三张幻灯片的内容。两侧的长度相同，但是在最后一张幻灯片中，内容更多，这就是我的前两张幻灯片未显示在中间的原因。我需要所有滑块都应显示在中间。

$(document).ready(function() {
  $("#owl-example").owlCarousel({
      navigation : true, // Show next and prev buttons
      slideSpeed : 300,
      margin:10,
      paginationSpeed : 400,
      autoplay:false,
      items : 1,
      itemsDesktop : false,
      itemsDesktopSmall : false,
      itemsTablet: false,
      itemsMobile : false,
      loop:true,
      nav:true,
      navText: ["<i class='fa fa-angle-left' aria-hidden='true'></i>","<i class='fa fa-angle-right' aria-hidden='true'></i>"]
  });
});

.left_50{
  width: 600px;
  margin: 0 auto;
}
#owl-example{
  border: 1px solid #000;
}
body .owl-nav div{
position: absolute;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
border:1px solid #000;
width: 40px;
height: 40px;
border-radius: 50%;
}
body .owl-prev{
  left: 0;
  display: flex;
}
body .owl-next{
  right: 0;
  display: flex;
}
body .owl-prev i, body .owl-next i{
  margin: auto;
}

#owl-example .owl-item{
  box-sizing: border-box;
  padding: 40px;
  text-align: center;
}
#owl-example .owl-item p{
  font-size: 25px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" />
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css">
    <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>

  <div class="left_50">
<div id="owl-example" class="owl-carousel">

 <div class="owl_text"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Lorem</p> </div>
 <div class="owl_text"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Lorem.ipsum</p> </div>
  <div class="owl_text"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p> </div>
</div>
</div>

最佳答案

您可以在猫头鹰项目div的上方使用display: flex;和align-items: center;

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

比工作还好

演示：https://www.w3schools.com/code/tryit.asp?filename=FNM14PUMZMNU

关于jquery - 如何在中间显示owlCarousel2滑块内容？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48336847/