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＆amp;在不知道其高度或宽度的情况下，尊重图片的原始比例;这些是你必须要做的事情。

Answer 2

将此行添加到CSS .slider img

margin: 0 auto;

但你也需要在js中处理它

Answer 3

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

像这样：

.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;
 }

中心图像在褪色的背景中

3 个答案: