使用 zurb 基础轨道滑块时，如何使滑块居中

【问题标题】：when using zurb foundation orbit slider, how to center slides使用 zurb 基础轨道滑块时，如何使滑块居中
【发布时间】：2014-01-16 16:14:53
【问题描述】：

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

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

我想要完成的是使组成幻灯片的<li> 元素居中，这样当图像较窄时，它的一侧就不会出现看起来很笨的白色条纹。

【问题讨论】：

标签： css zurb-foundation orbit

【解决方案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 类并设置图像的宽度并添加边距：0 auto like：

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

【讨论】：

我应该说，在 '.full_width li img` 类上我只需要边距。