如何在屏幕中間對齊這個貓頭鷹項目？嘗試過：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
3 回答
喵喵時光機
TA貢獻1846條經驗 獲得超7個贊
將其添加到您的 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/
陪伴而非守候
TA貢獻1757條經驗 獲得超8個贊
您不需要將 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;
}
呼啦一陣風
TA貢獻1802條經驗 獲得超6個贊
輪播是頁面的整個寬度，因此它已經居中。如果您希望它小于全寬，您可以width向 中添加樣式.owl-carousel，并將整個內容放入帶有 的彈性盒中justify-content:center。
https://jsfiddle.net/o0yk9rbh/6/
- 3 回答
- 0 關注
- 186 瀏覽
添加回答
舉報
0/150
提交
取消