BXSlider中的图片偏离中心

Question

4

我正在创建一个作品集网站，但是我一直在使用轮播时遇到问题。我决定尝试bxslider，因为我喜欢它的样式，但是一周以来一直困扰着我如何让图片居中显示。

我已经成功地运行了滑块，但我的图片一直显示为偏离中心，就像有些CSS发生了冲突一样。这些图片的大小为800px x 300px - 我可以通过设置 slideWidth:800 来将框的宽度设置为800px，但这并不能解决问题。你可以看到标题被裁剪了 - 图片被向下和向右移动。

请参阅测试页面 - 这是使用未修改的bxslider副本和没有额外CSS的页面。

任何帮助都将不胜感激 - 我相信这是一些简单的问题，但我还是比较新手！

- Kevin

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- isherwood · Accepted Answer

由于您的图片太大，它们偏离中心，并且左对齐，因此会向右延伸出其父元素。请描述您想要的布局，我可以提供进一步的帮助。这是我的猜测：

.bx-wrapper img {
    width: 720px;
    height: 230px;
}
.bx-wrapper .bx-caption {
    width: 720px;
}

你也可以这样做：

.bx-wrapper {
    width: 880px;
}
.bx-viewport {
    height: 340px;
}

根据您的评论更新：

.bx-viewport ul {
  margin: 0;
  padding: 0;
}