Question

I have a web page formatted with jQuery mobile that utilizes Owl Carousel & Photoswipe and it is giving me trouble when viewed on mobile sizes. The problem is that when viewed on a portrait sized mobile phone (IPhone 5) the one image that is displayed is off center. I noticed that there is Javascript applying inline style to the ul with the class of .owl-carousel.owl-theme which sets the display to block. If I switch this to inline while debugging the page in Mobile view with developer tools in Chrome the one image is correctly centered. If I try to hard code this into the CSS then all images are stacked on top of one another and you can only click on one image (which is incorrect behavior since there are three images in the carousel/gallery).

Does anyone know what my problem is, and how to solve it so that if viewed from a mobile device in portrait (when only one carousel image is displayed) the image is centered correctly on the page? I have other pages with similar CSS for the carousel (though not jQuery Mobile) and when viewed on a mobile device the behavior is correct, so I am stumped! Thank you for any help given!

Answer 1

试试这个CSS

CSS

ul.owl-carousel{
padding:0;
text-align:center;
}

希望这会有所帮助..

Answer 2

我就是这样做的。基于 Chandra Shekhar 的回答，但似乎该插件现在正在使用 div 而不是 ul；我还添加了移动查询。

@media only screen and (max-width: 450px) {
  div.owl-carousel {
    padding:0;
    text-align:center;
  }
}

Owl Carousel Centering Mobile Layout

2 个答案: