如何在“猫头鹰轮播"中将图像居中 [英] How to center the images in the Owl Carousel

问题描述

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

My Owl Carousel contains pictures of different width and height. How do I align them in the middle - both horizontally and vertically?

$("#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="//placehold.it/120x120/69c/fff/" alt=""></div>
  <div><img src="//placehold.it/200x200/c69/fff/" alt=""></div>
  <div><img src="//placehold.it/160x160/9c6/fff/" alt=""></div>
  <div><img src="//placehold.it/240x240/fc6/fff/" alt=""></div>
  <div><img src="//placehold.it/160x160/9c6/fff/" alt=""></div>
  <div><img src="//placehold.it/200x200/c69/fff/" alt=""></div>
  <div><img src="//placehold.it/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>

推荐答案

1. 猫头鹰轮播"会在您的布局中创建其他块.要正确添加CSS属性，您需要使用以下HTML结构:

1. The Owl Carousel creates additional blocks within your layout. To add CSS properties correctly, you need to work with this HTML structure:

<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>

此外，轮播会向所有块添加style属性.例如，具有.owl-wrapper类的块将接收值为block的display属性.因此，您必须在CSS中使用!important声明.

Moreover the carousel adds a style attribute to all blocks. For example, a block with the .owl-wrapper class receives the display property with the value of block. So you have to use an !important declaration in your CSS.

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

To obtain a horizontal alignment, you can simply add text-align: center; property to each .owl-item > div.

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

To align vertically, you can turn the carousel items in table cells. But do not forget to cancel the float property for them.

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

Let us arrange all of the changes as a new .owl-centered class. Please check the result:

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="//placehold.it/120x120/69c/fff/" alt=""></div>
  <div><img src="//placehold.it/200x200/c69/fff/" alt=""></div>
  <div><img src="//placehold.it/160x160/9c6/fff/" alt=""></div>
  <div><img src="//placehold.it/240x240/fc6/fff/" alt=""></div>
  <div><img src="//placehold.it/160x160/9c6/fff/" alt=""></div>
  <div><img src="//placehold.it/200x200/c69/fff/" alt=""></div>
  <div><img src="//placehold.it/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>

这篇关于如何在“猫头鹰轮播"中将图像居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！