如何将图像置于猫头鹰旋转木马中心

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>

4 个解决方案

#1

With owl carousel version 2.1.1 and CSS3 Flexbox, just add the style:

使用owl carousel 2.1.1版和CSS3 Flexbox,只需添加样式:

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

See the snippet:

请参阅代码段:

$( 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="http://lorempicsum.com/up/350/200/1">
      <div class="caption">Caption 1</div>
    </div>
    <div class="item">
      <img src="http://lorempicsum.com/up/255/200/2">
      <div class="caption">Caption 2</div>
    </div>
    <div class="item">
      <img src="http://lorempicsum.com/up/627/200/3">
      <div class="caption">Caption 3</div>
    </div>
    <div class="item">
      <img src="http://lorempicsum.com/up/627/300/4">
      <div class="caption">Caption 4</div>
    </div>
    <div class="item">
      <img src="http://lorempicsum.com/up/627/400/5">
      <div class="caption">Caption 5</div>
    </div>
    <div class="item">
      <img src="http://lorempicsum.com/up/255/200/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>

#2

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

   猫头鹰旋转木马在您的布局中创建了额外的块。要正确添加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>
   

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

   此外,轮播将样式属性添加到所有块。例如,具有.owl-wrapper类的块接收具有block值的display属性。所以你必须在CSS中使用!important声明。

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

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

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

   要垂直对齐,您可以在表格单元格中转动轮播项目。但是别忘了为它们取消float属性。

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

让我们安排所有的变化作为一个新的.owl为中心的类。请检查结果:

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>

#3

This works for me:

这对我有用:

@media (max-width:500px) {
    .owl-carousel .owl-item {
        text-align:center;
    }
    .owl-carousel .item {
        float: none;
        display: inline-block;
    }
}

You might adjust it to your HTML though, but the idea is that you text-align a parent, and float:none and display:inline-block the child that holds the content, on mobile:

您可以将其调整为您的HTML,但想法是您对父级进行文本对齐,并且浮动:无并显示:内联阻止在移动设备上保存内容的子项:

#4

The solution with display table is OK, but for me the divs on the right and left side slides out from the container. My code is close the same, I changed the table and table-cell to block and inline-block

显示表的解决方案没问题,但对我来说,右侧和左侧的div从容器中滑出。我的代码差不多,我将表和table-cell更改为block和inline-block

.owl-stage{
  display: block !important;
}

.owl-item{
  display: inline-block;
  float: none;
  vertical-align: middle;
}

.item{
  text-align: center;
}

The result (all images has different sizes):

结果(所有图像都有不同的大小):