对于使用 Nivo Slider 的任何人，是否有任何直接的方法（或不）使图像在滑块上居中？我知道 Nivo Slider 旨在显示完美“适合”盒子的图像（与我使用它的方式不同），但出于技术原因，我宁愿尝试将图像居中而不是使我的所有图像完美适合 Nivo 盒子的宽度和高度。目前我的 Nivo 幻灯片如下所示：
http://dl.dropbox.com/u/12453703/nivo.png
抱歉，我没有提供任何代码示例让我尝试此操作。我的 CSS 知识不是太丰富，我解决问题的大部分尝试要么是查看网络上的解决方案（并尝试应用上述解决方案），要么尝试在我的样式表中随机添加一行以尝试修复问题。
如果您想知道我正在使用哪些 CSS 文件，我使用的是默认主题，可以在此处下载： http://cloud.github.com/downloads/gilbitron/Nivo-Slider/nivo-slider2.7.1.zip
谢谢，我很感激。
【问题讨论】：
标签： jquery css nivo-slider
创建一个包装 div 并在该 div 中居中 nivoslider。
HTML：
<div id="wrap">
<div id="slider" class="nivoSlider">
<img src="images/slide.jpg" alt="" />
</div>
</div>
CSS：
#wrap {
position: relative;
height: 500px;
width: 500px;
}
#slider {
position: absolute;
top: 50%;
left: 50%;
margin-top: -125px; // Half the height
margin-left: -125px; // Half the width
height: 250px;
width: 250px;
}
编辑：
编辑demo.html 并添加一个额外的包装器，如下所示：
<div class="slider-wrapper theme-default">
<div class="ribbon"></div>
<div id="slider-wrap"> <!-- Extra wrapper -->
<div id="slider" class="nivoSlider">
<img src="images/toystory.jpg" alt="" />
<a href="http://dev7studios.com"><img src="images/up.jpg" alt="" title="This is an example of a caption" /></a>
<img src="images/walle.jpg" alt="" data-transition="slideInLeft" />
<img src="images/nemo.jpg" alt="" title="#htmlcaption" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>
</div>
</div>
在演示文件中的style.css 内添加：
#slider-wrap {
position: absolute;
top: 50%;
left: 50%;
margin-top: -123px; /* 246/2 */
margin-left: -309px;/ /* 618/2 */
}
.slider-wrapper {
position: relative;
height: 500px;
width: 1000px;
background: red;
}
找到这一行并注释边距规则：
.theme-default #slider {
/* margin:100px auto 0 auto; */
width:618px; /* Make sure your images are the same size */
height:246px; /* Make sure your images are the same size */
}
下载修改后的例子，研究代码http://www.mediafire.com/?9f7z9ku4n1ikiba
【讨论】：
试试这个 css。
.nivoSlider img {
background-position:center center;
}
【讨论】：
图像的位置正在加载到 javascript 文件中。编辑“jquery.nivo.slider.js”（请确保在标题中使用此文件而不是“jquery.nivo.slider.pack.js”。）
转到第 85 行：
//Set first background
slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
找到上面的行。将其更改为：
//Set first background
slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat center');
现在您可以看到您的第一张图片位于中间。只需播放该文件，您肯定会使整个图像居中。
编辑： 找到这个函数：//为切片动画添加切片。第 253 行。 编辑其他部分。 262行
background: 'url("'+ vars.currentImage.attr('src') +'") no-repeat -'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px 0%'
通过将 0% 更改为 50% 使图像垂直居中。越来越近了……
编辑
再次编辑上面的行并替换为下面的行。
background: 'url("'+ vars.currentImage.attr('src') +'") no-repeat 50%'
这肯定行得通..
编辑
忘记上面所有的编辑。只需将您的 jquery.nivo.slider.js 文件替换为 this one。
【讨论】：
如果您需要制作水平居中背景并且希望所有过渡都能正常工作，您可以执行以下操作：
需要知道当前图片的实际宽度
您需要计算一个偏移量，应该从哪个切片（或框）开始添加该图像：
var mySliceOffset = (vars.currentImage.attr('width') - $('body').width()) / 2;
（在此示例中，滑块容器宽度设置为 100%）
然后编辑背景属性：
background: 'url("'+ vars.currentImage.attr('src') +'") no-repeat -'+ ((mySliceOffset+sliceWidth + (i * sliceWidth)) - sliceWidth) +'px 0%'
【讨论】：
对我来说，最简单的解决方案需要 3 件事：
对于第 1 步，我使用了 1220 像素。这仅仅是因为当我的图像宽度超过 1220 像素时，它们的底部开始被裁剪掉。选择任何你想要的。数字越大，在开始居中之前视口越宽。但是，缺点是您的所有图像都需要至少与您选择的任何图像一样宽。
对于第 2 步，只需遵循规则即可。如果您的图片不够宽，但您仍想使用它，您可以通过对图片进行简单的编辑来实现，如下所示：
假设您有一张 800x600 的图片，并且您在第 1 步中选择了 1220。该图片无法使用，因为它太小了。但是，如果您制作具有可接受宽度（即 1220x600）的新图像，则可以使用滑块后面使用的任何背景颜色填充整个图像。然后，获取 800x600 图像并将其粘贴到新 1220x600 图像的中心。这个新的 1220x600 图像应该正确居中。
对于第 3 步：
CSS
将以下内容添加到 nivo-slider.css
.slider-wrapper
{
position:relative;
max-width: 1220px; - Change this width to whatever you want
margin-left:auto;
margin-right:auto;
}.nivoSlider img {
position:absolute;
max-width: 1220px;
left:0px;
top:0px;HTML
将滑块放入新的滑块包装器中。
<div class="slider-wrapper">
<div id="slider" class="nivoSlider">
*slider stuff*
</div>
</div>享受对称！
【讨论】：