褪色背景中的居中图像答案

【问题标题】：center images in fading background褪色背景中的居中图像
【发布时间】：2013-05-01 05:33:05
【问题描述】：

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

.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)

【问题讨论】：

标签： javascript css slideshow centering

【解决方案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 做的事情。

【讨论】：

【解决方案2】：

将此行添加到 CSS .slider img

margin: 0 auto;

但你也需要在js中处理它

【讨论】：

【解决方案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;
 }

【讨论】：