猫头鹰旋转木马居中移动布局答案

【问题标题】：Owl Carousel Centering Mobile Layout猫头鹰旋转木马居中移动布局
【发布时间】：2017-07-12 07:56:59
【问题描述】：

我有一个使用 Owl Carousel 和 Photoswipe 使用 jQuery mobile 格式化的网页，在移动设备尺寸上查看时给我带来了麻烦。问题是，当在纵向尺寸的手机（iPhone 5）上查看时，显示的一个图像偏离中心。我注意到有 Javascript 使用 .owl-carousel.owl-theme 类将内联样式应用于 ul ，它将显示设置为阻止。如果我在使用 Chrome 中的开发人员工具在移动视图中调试页面时将其切换为内联，则一个图像正确居中。如果我尝试将其硬编码到 CSS 中，那么所有图像都堆叠在一起，您只能单击一张图像（这是不正确的行为，因为轮播/画廊中有三张图像）。

有谁知道我的问题是什么，以及如何解决它，以便从移动设备纵向查看（仅显示一个轮播图像时）图像在页面上正确居中？我有其他具有类似 CSS 的轮播页面（虽然不是 jQuery Mobile），当在移动设备上查看时，行为是正确的，所以我很难过！感谢您提供的任何帮助！

【问题讨论】：

标签： javascript css owl-carousel photoswipe

【解决方案1】：

试试这个 CSS

CSS

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

希望这会有所帮助..

【讨论】：

关闭。该图像现在在移动设备中看起来正确居中，但是一旦我在开发人员工具中切换回正常的浏览器视图，画廊中的三个图像就会失去每个图像之间的边距。这是一个令人头疼的问题。我要去干草，明天再回来检查。这里已经很晚了！：）谢谢你的帮助！明天当我再次入住并重试时，这可能会让我更接近！
我想我现在明白了。我没有使用您修改后的代码。我使用了您之前放置的内容，并删除了一些在断点处应用的 CSS。我超级感激！如果您将代码更改回原来的样子，我会投票支持您的答案。 :)
感谢您的帮助！

【解决方案2】：

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

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

【讨论】：