javascript - 褪色背景中的居中图像

Question

我正在制作一个褪色的幻灯片，一切都很好，但我似乎无法让图像居中......我猜/希望它很小，但它让我发疯，我就是不能找到解决方案，希望有人可以帮助我！

.slider { position: absolute; top:0px; left:0px; width:100%; height:420px; overflow:hidden; } .slider img { width:2560px; height:100%; display:block; overflow:hidden; }

http://jsfiddle.net/DvK3p

注意 我使用的 ResponsiveSlides.js 是一个很小的 ​​jQuery 插件（http://responsiveslides.com）

Answer 1

要使您的图像居中，请使用

margin-left: auto;
margin-right: auto;

但为此，您需要元素集的宽度：

margin:0 auto;  /* Same as above, but with margin-top and bottom set to 0 */
width: 200px;   /* Example */

或者，您不能width在不知道图片的高度或宽度的情况下设置和尊重图片的原始比例；这些是你必须用 JS 做的事情。

Answer 2

将此行添加到 CSS.slider img

margin: 0 auto;

但是你也需要在js中处理它

Answer 3

尝试将绝对位置更改为相对位置，同时为容器设置固定宽度：滑块并添加边距：0 自动。

像这样：

.slider { position: relative;
          top:0px; left:0px;
          margin: 0 auto;
          width:560px;
          height:420px;
          overflow:hidden;
 }

.slider img { width:560px;
          height:100%;
          display:block;
          overflow:hidden;
 }