图像滑块宽度比包装器宽，当它到达网站的适当宽度时不会溢出和居中

Question

我目前正在构建一个WordPress网站并遇到滑块问题。

幻灯片图片宽度为1200像素，但网站为945像素。我需要图像始终保持居中。当浏览器被拉伸到超过1200px宽时它很好但是一旦你调整到大约1100px宽和更小的滑块图像不会溢出页面的左侧，它会触及左侧浏览器的边缘而不是中心再向右推，所以我的图像的额外部分应该溢出浏览器，但这不是出于某种原因。

这是当页面向下滚动时它看起来如何的图像，写作应该总是在左边排列，剩下的东西就像下面的图像一样，两边大约有100px，但在右边图像逐渐消失，因此它需要比945px宽度更远：

这是我的CSS及其缓动滑块WordPress插件：

section#slider-wrapper {
width:100%;
height:330px;
margin-bottom: 32px;
position: relative;
overflow: visible;
z-index: 1;
-webkit-box-shadow: 0px 0px 11px #eee;
   -moz-box-shadow: 0px 0px 11px #eee;
        box-shadow: 0px 0px 11px #eee;      
background: url(images/slider-bg.jpg) #fff center repeat;       
}



#slider-wrapper #slides {
z-index:100;
height:330px;
width: 1200px;
margin: 0 auto;
position: relative;
 }
 #slider-wrapper .slides_container {
width:100%;
overflow:hidden;
position:absolute;
 }
 #slider-wrapper .slides_container div.slide, #slider-wrapper .slides_container div.slide img {
width:100%;
height:330px;
display:block;
  }
  #slider-wrapper .slides_container div.slide img {
width:1200px;
height:330px;
display:block;
  }

这是HTML：

<section id="slider-wrapper">
<div id="slides">
        <div class="slides_container">
         <!-- Easing Slider -->
             <div class="lof-container" style="height:330px;padding-right:0px;padding-top:0px;padding-left:0px;padding-bottom:0px;">
             <div class="lof-slidecontent" id="lofslidecontent45" style="border:0px solid #ccc;width:1200px;height:330px;">
             <div class="preload" style="padding-top:1px\9;background:url(wp-content/plugins/easing-slider/images/indicator.gif) no-repeat center center #;">

       </div>
        <div class="lof-main-outer" style="background: #;width:1200px;height:330px;">
            <ul class="lof-main-wapper">
               <li><img src="wp-content/uploads/2012/08/slide_1.jpg" style="width:1200px;" alt="" /></li>       
               <li><img src="wp-content/uploads/2012/08/slide_2.jpg" style="width:1200px;" alt="" /></li>
           </ul>
         </div>
        </div>
      </div><!-- End of Easing Slider -->       
     </div>
</div>  
<div class="clear"></div>
  </section><!-- END OF SECTION#SLIDER-WRAPPER -->

我尝试过溢出，最小宽度似乎无法让它工作/

以下是jFiddle版本在浏览器中的工作原理， 红线永远不会溢出。

http://jsfiddle.net/strohy85/8dQ96/