当使用zurb基础轨道滑块时，如何使幻灯片居中

Question

如此截图所示： 在我的24英寸显示器上，白色背景通过我的轨道滑块显示。 这是因为我的源图像比浏览器窗口的宽度更窄（以像素为单位）。

如果我将窗口缩小，图像会按照预期缩小，而不会显示任何背景：

我想要完成的是将构成幻灯片的<li>元素居中，这样当图像变窄时，一侧不会出现看起来很愚蠢的白色条纹。

Answer 1

试试这个：

使用以下样式设置一个full_width类：

.full_width {
    width:100%;}

将此类添加到轨道ul：

<ul class="full_width" data-orbit data-options="...">
   <li><img src="img/slider/slide1.png"></li>
   <li><img src="img/slider/slide2.png"></li>
   <li><img src="img/slider/slide3.png"></li>
   <li><img src="img/slider/slide4.png"></li>
</ul>

然后在你的样式表中添加一个full_width li img类并设置图像的宽度并添加margin：0 auto like：

.full_width li img {
    width:960px;
    margin:0 auto;}