中心对齐猫头鹰轮播项目

Question

如何在屏幕中间对齐这个猫头鹰项目？尝试过：center: true请查看完整页面视图：var owl = $('.video-thumb').owlCarousel({  items: 7,  autoplay: false,  loop: false,  nav: true,  dots: false,  margin: 30,  center: true,  responsive: {    0: {      items: 1    },    640: {      items: 2    },    768: {      items: 3    },    992: {      items: 4    },    1200: {      items: 5    },    1600: {      items: 7    }  }});<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/><link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet"/><script src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.min.js"></script><script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script><div class="video-thumb owl-carousel owl-theme">  <div class="thumb-item">    <a href="#"><img src="https://via.placeholder.com/150" alt="eMAM Cloud" /></a>  </div>  <div class="thumb-item">    <a href="#"><img src="https://via.placeholder.com/150" alt="eMAM Cloud" /></a>  </div></div>它可能包含任意数量的项目。JSFiddle

Answer 1

将其添加到您的 CSS 中：

.owl-carousel {

    display: flex !important; /* To override display:block I added !important */

    flex-direction: row;

    justify-content: center; /* To center the carousel */

}

JSFiddle： https: //jsfiddle.net/2z1qadv3/

Answer 2

您不需要将 owl-carousel 更改为display: flex& justify content: center。猫头鹰点容器位于猫头鹰旋转木马内。因此将容器的宽度设置为 100% & justify-content: center。这仅影响容器内的点。这是层次结构。

猫头鹰旋转木马

|__ 猫头鹰点

|___ 猫头鹰点

以下是手动将点放置在任何位置的示例代码。

#my-carousel .owl-dots {

    position: absolute;

    width: 100%;

    bottom: 12%;

    display: flex;

    justify-content: center;

}

Answer 3

轮播是页面的整个宽度，因此它已经居中。如果您希望它小于全宽，您可以width向 中添加样式.owl-carousel，并将整个内容放入带有 的弹性盒中justify-content:center。

https://jsfiddle.net/o0yk9rbh/6/