在褪色的背景中心图像

center images in fading background

本文关键字：心图 图像 背景 褪色      更新时间：2023-09-26

我正在做一个褪色的幻灯片，一切都很好，但我似乎无法让图像居中…我想/希望这是一件小事，但它让我发疯，我只是找不到解决方案，希望有人能帮助我!

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

设置图片居中，使用

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做的事情

添加一行到CSS .slider img 

margin: 0 auto;

但是你也需要在js中修改

尝试将绝对位置更改为相对位置，同时为container: slider设置固定宽度，并添加margin: 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;
 }
相关文章：