中心对齐猫头鹰轮播项目

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 {&nbsp; &nbsp; display: flex !important; /* To override display:block I added !important */&nbsp; &nbsp; flex-direction: row;&nbsp; &nbsp; justify-content: center; /* To center the carousel */}JSFiddle： https:&nbsp;//jsfiddle.net/2z1qadv3/

Answer 2

您不需要将 owl-carousel 更改为display: flex& justify content: center。猫头鹰点容器位于猫头鹰旋转木马内。因此将容器的宽度设置为 100% & justify-content: center。这仅影响容器内的点。这是层次结构。猫头鹰旋转木马|__ 猫头鹰点|___ 猫头鹰点以下是手动将点放置在任何位置的示例代码。#my-carousel .owl-dots {&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; bottom: 12%;&nbsp; &nbsp; display: flex;&nbsp; &nbsp; justify-content: center;}

Answer 3

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