中心图像在褪色的背景

Question

I'm working on a fading slideshow and everything is working great but I just can't seem to get the image('s) centered... I guess/hope it's something small but it's driving me crazy that I just can't find the solution, hopefully someone can help me out!

.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

Note I am using the ResponsiveSlides.js is a tiny jQuery plugin ( http://responsiveslides.com )

Answer 1

To get your image centered, use

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

But for this, you need the width of your element set:

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

Or, you can't set width & respect the original ratio of your picture without knowing either its height or width ; these are things you have to do with JS.

Answer 2

Add this line to CSS .slider img

margin: 0 auto;

But you need to work on it in the js too

Answer 3

Try changing position absolute to relative, set also a fixed width to container: slider and add to it margin: 0 auto.

like this:

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