如何使猫头鹰轮播中的图像居中

Question

我的猫头鹰轮播包含不同宽度和高度的图片。我如何在中间对齐它们 - 水平和垂直？

 $("#owl-example").owlCarousel({
  navigation: true
});

 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css">

<div id="owl-example" class="owl-carousel">
  <div><img src="https://via.placeholder.com/120x120/69c/fff/" alt=""></div>
  <div><img src="https://via.placeholder.com/200x200/c69/fff/" alt=""></div>
  <div><img src="https://via.placeholder.com/160x160/9c6/fff/" alt=""></div>
  <div><img src="https://via.placeholder.com/240x240/fc6/fff/" alt=""></div>
  <div><img src="https://via.placeholder.com/160x160/9c6/fff/" alt=""></div>
  <div><img src="https://via.placeholder.com/200x200/c69/fff/" alt=""></div>
  <div><img src="https://via.placeholder.com/120x120/69c/fff/" alt=""></div>
</div>

<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>

原文由 Gleb Kemarsky 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

1. Owl Carousel 在您的布局中创建额外的块。要正确添加 CSS 属性，您需要使用以下 HTML 结构：

    <div id="owl-demo" class="owl-carousel owl-theme">
     <div class="owl-wrapper-outer">
       <div class="owl-wrapper">
         <div class="owl-item">
           <div>
             <img src="" alt="">
           </div>
         </div>
         <div class="owl-item">
           <div>
             <img src="" alt="">
           </div>
         </div>
       </div>
     </div>
   </div>

1. 此外，旋转木马为所有块添加了 style 属性。例如，具有 .owl-wrapper 类的块接收 display 值为 block 的属性。因此，您必须在 CSS 中使用 !important 声明。

2. 要获得水平对齐，您只需将 text-align: center; 属性添加到每个 .owl-item > div 。

3. 要垂直对齐，您可以转动表格单元格中的轮播项目。但不要忘记为他们取消 float 属性。

让我们将所有更改安排为一个新的 .owl-centered 类。请检查结果：

猫头鹰轮播 2.3.4： https ://codepen.io/glebkema/pen/vYKMgzj

猫头鹰轮播 1.3.3： https ://codepen.io/glebkema/pen/BzgZxX

 $("#owl-example").owlCarousel({
  navigation: true
});

 @import url('//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css');
@import url('//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css');

.owl-centered .owl-wrapper {
  display: table !important;
}
.owl-centered .owl-item {
  display: table-cell;
  float: none;
  vertical-align: middle;
}
.owl-centered .owl-item > div {
  text-align: center;
}

 <div id="owl-example" class="owl-carousel owl-centered">
  <div><img src="https://via.placeholder.com/120x120/69c/fff/" alt=""></div>
  <div><img src="https://via.placeholder.com/200x200/c69/fff/" alt=""></div>
  <div><img src="https://via.placeholder.com/160x160/9c6/fff/" alt=""></div>
  <div><img src="https://via.placeholder.com/240x240/fc6/fff/" alt=""></div>
  <div><img src="https://via.placeholder.com/160x160/9c6/fff/" alt=""></div>
  <div><img src="https://via.placeholder.com/200x200/c69/fff/" alt=""></div>
  <div><img src="https://via.placeholder.com/120x120/69c/fff/" alt=""></div>
</div>

<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>

原文由 Gleb Kemarsky 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

使用 owl carousel version 2.1.1 和 CSS3 Flexbox，只需添加样式：

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

看片段：

 $( document ).ready( function() {
  $( '.owl-carousel' ).owlCarousel({
     autoplay: true,
     margin: 2,
     loop: true,
     responsive: {
        0: {
           items:1
        },
        200: {
           items:3
        },
        500: {
           items:4
        }
     }
  });
});

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

.owl-carousel .caption {
  text-align: center;
}

 <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet"/>

<div class="owl-carousel">
    <div class="item">
      <img src="https://via.placeholder.com/350x200/?text=1">
      <div class="caption">Caption 1</div>
    </div>
    <div class="item">
      <img src="https://via.placeholder.com/255x200/?text=2">
      <div class="caption">Caption 2</div>
    </div>
    <div class="item">
      <img src="https://via.placeholder.com/627x200/?text=3">
      <div class="caption">Caption 3</div>
    </div>
    <div class="item">
      <img src="https://via.placeholder.com/627x300/?text=4">
      <div class="caption">Caption 4</div>
    </div>
    <div class="item">
      <img src="https://via.placeholder.com/627x400/?text=5">
      <div class="caption">Caption 5</div>
    </div>
    <div class="item">
      <img src="https://via.placeholder.com/255x200/?text=6">
      <div class="caption">Caption 6</div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>

原文由 xavier bs 发布，翻译遵循 CC BY-SA 4.0 许可协议