Width 图像滑块宽度比包装宽度宽，当到达合适的站点宽度时不会溢出并居中

我目前正在建立一个WordPress网站，但有一个滑块问题

幻灯片图像宽1200px，但站点为945px。我需要图像始终居中。当浏览器的宽度超过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 -->

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

这是JFIDLE版本，它在我的浏览器中的工作原理， 红线永不溢出

---

您正在将图像放置在一个列表中（

UL

元素，如主wapper

lof

class）。列表容器有左填充，其内容不居中。尝试添加此CSS:

.lof main wapper{list type:none；padding:0；text align:center；}

。嘿，jay，这不起作用。我更新了JSFIDLE，省略了插件使用的默认CSS。它已经有了填充：0；你建议的那个div