我在我的网站上使用Cyclone滑块：http://www.malithaisouthcenter.com/ 如果缩小，您可以看到图像不在中心位置（它们位于页面的左侧），但已应用{margin：0 auto}。我该如何解决？
/*** Template Standard ***/
.cycloneslider-template-standard{
position:relative;
outline: none;
}
.cycloneslider-template-standard .cycloneslider-slides{
position:relative;
overflow:hidden;
}
.cycloneslider-template-standard .cycloneslider-slide{
text-align: center;
width: 100%; /* For slides in scrollHorz to work */
display: none; /* Hide slides to prevent FOUC when JS hasn't kicked in yet */
background: #fff; /* Add background to prevent slides from peeking behind the current slide when fx=scrollHorz and hideNonActive=false */
}
.cycloneslider-template-standard .cycle-slide{
display: block; /* Show slide so that getBoundingClientRect().height will not return 0. Class .cycle-slide is added when cycle has initialized. */
}
.cycloneslider-template-standard div[data-cycle-hide-non-active="false"] .cycloneslider-slide{
opacity: 0; /* Avoid youtube and vimeo or other slides from peeking behind the current slide whe in transit */
}
.cycloneslider-template-standard div[data-cycle-dynamic-height="off"] .cycloneslider-slide-image{
height: 100%; /* To prevent cutting off captions when dynamic height is off */
}
.cycloneslider-template-standard .cycloneslider-slide:first-child, /* Show first slide */
.cycloneslider-template-standard .cycle-sentinel + .cycloneslider-slide{ /* Select next slide when using sentinel slide */
display: block;
}
.cycloneslider-template-standard .cycloneslider-slide img{
display:block;
margin:0 auto;
padding:0;
max-width:100%;
border:0;
}
.cycloneslider-template-standard.cycloneslider-width-full .cycloneslider-slide img{
/*width:100%;*/
}
.cycloneslider-template-standard .cycloneslider-slide iframe, /* Make our videos fluid */
.cycloneslider-template-standard .cycloneslider-slide object,
.cycloneslider-template-standard .cycloneslider-slide embed {
position: absolute;
left: 0;
top: 0;
width: 100% !important; /* Override width attrib */
height: 100% !important; /* Override height attrib */
}
.cycloneslider-template-standard .cycloneslider-slide-youtube,
.cycloneslider-template-standard .cycloneslider-slide-vimeo{
background: #000;
}
.cycloneslider-template-standard .cycloneslider-slide-custom,
.cycloneslider-template-standard .cycloneslider-slide-testimonial{
min-height: 100%;
}
.cycloneslider-template-standard div[data-cycle-dynamic-height="on"] .cycloneslider-slide-custom,
.cycloneslider-template-standard div[data-cycle-dynamic-height="on"] .cycle-sentinel + .cycloneslider-slide-testimonial{
min-height: 100px; /* Disable 100% min height when dynamic height is on. To fix issue with scrollHorz */
}
.cycloneslider-template-standard .cycloneslider-slide-testimonial{
font-style: italic;
}
.cycloneslider-template-standard .cycloneslider-slide-testimonial blockquote{
margin-bottom: 0;
}
.cycloneslider-template-standard .cycloneslider-slide-testimonial p{
margin: 0;
}
.cycloneslider-template-standard .cycloneslider-slide-testimonial .cycloneslider-testimonial-author{
text-align: right;
font-style: normal;
}
.rtl .cycloneslider-template-standard .cycloneslider-slide-testimonial .cycloneslider-testimonial-author{
text-align: left;
}
.cycloneslider-template-standard .cycloneslider-slide-testimonial .cycloneslider-testimonial-author a{
text-decoration: none;
}
/*** Prev/Next ***/
.cycloneslider-template-standard .cycloneslider-prev,
.cycloneslider-template-standard .cycloneslider-next,
.cycloneslider-template-standard .cycloneslider-pager span {
cursor:pointer;
}
.cycloneslider-template-standard .cycloneslider-prev,
.cycloneslider-template-standard .cycloneslider-next{
position:absolute;
top:50%;
z-index:501;
display: block;
margin-top:-12px;
width:24px;
height:24px;
border-radius: 40px;
background: #fefefe;
opacity: 0;
-webkit-transition: all 0.5s ;
-moz-transition: all 0.5s ;
-ms-transition: all 0.5s ;
-o-transition: all 0.5s ;
transition: all 0.5s ;
-webkit-box-shadow: 1px 1px 2px 0px #333333;
box-shadow: 1px 1px 2px 0px #333333;
}
.cycloneslider-template-standard:hover .cycloneslider-prev,
.cycloneslider-template-standard:hover .cycloneslider-next{
opacity: 0.4;
}
.cycloneslider-template-standard .cycloneslider-prev:hover,
.cycloneslider-template-standard .cycloneslider-next:hover{
opacity: 1;
}
.cycloneslider-template-standard .cycloneslider-prev.disabled,
.cycloneslider-template-standard .cycloneslider-next.disabled{
display: none;
}
.cycloneslider-template-standard .arrow{
position: absolute;
top: 50%;
left: 50%;
margin-top: -6px;
width: 0;
height: 0;
}
.cycloneslider-template-standard .cycloneslider-prev{
left:10px;
}
.rtl .cycloneslider-template-standard .cycloneslider-prev{
left:auto;
right:10px;
}
.cycloneslider-template-standard .cycloneslider-prev .arrow{
margin-left: -4px;
border-top: 6px solid transparent;
border-right: 6px solid #333;
border-bottom: 6px solid transparent;
}
.rtl .cycloneslider-template-standard .cycloneslider-prev .arrow{
margin-left: -2px;
border: 0;
border-top: 6px solid transparent;
border-left: 6px solid #333;
border-bottom: 6px solid transparent;
}
.cycloneslider-template-standard .cycloneslider-next{
right:10px;
}
.rtl .cycloneslider-template-standard .cycloneslider-next{
right:auto;
left:10px;
}
.cycloneslider-template-standard .cycloneslider-next .arrow{
margin-left: -2px;
border-top: 6px solid transparent;
border-left: 6px solid #333;
border-bottom: 6px solid transparent;
}
.rtl .cycloneslider-template-standard .cycloneslider-next .arrow{
margin-left: -4px;
border: 0;
border-top: 6px solid transparent;
border-right: 6px solid #333;
border-bottom: 6px solid transparent;
}
/*** Pager ***/
.cycloneslider-template-standard .cycloneslider-pager{
position:absolute;
bottom:-22px;
left:0;
z-index:100;
width: 100%;
height: 12px;
text-align: center;
}
.cycloneslider-template-standard .cycloneslider-pager span {
display: inline-block;
margin: 0 3px;
width: 12px;
height: 12px;
border-radius: 6px;
background: #333;
vertical-align: top;
font-size: 0;
line-height: 0;
-webkit-box-shadow: 1px 1px 2px 0px #333333;
box-shadow: 1px 1px 2px 0px #333333;
}
.ie7 .cycloneslider-template-standard .cycloneslider-pager span{
zoom: 1;/* IE 7 inline-block */
*display: inline;/* IE 7 inline-block */
}
.cycloneslider-template-standard .cycloneslider-pager span.cycle-pager-active {
background-color: #ccc;
}
/*** Caption ***/
.cycloneslider-template-standard .cycloneslider-caption{
position:absolute;
bottom:0;
left:0;
z-index:500;
width:100%;
background: #222;
color:#fff;
opacity: 0.7;
text-align: left;
}
.rtl .cycloneslider-template-standard .cycloneslider-caption{
text-align: right;
}
.cycloneslider-template-standard .cycloneslider-caption-title{
margin-bottom:0;
padding:10px 20px 5px 20px;
font-size:22px;
line-height:1;
}
.cycloneslider-template-standard .cycloneslider-caption-description{
padding:0 20px 15px 20px;
font-size:12px;
line-height:1.5;
}
答案 0 :(得分：0)
父div应该有自动保证金。
.cycloneslider {
margin: 0 auto;
}
原因是img与parent具有完全相同的宽度，并且继承。因此，差异仅为0px，而auto将与
答案 1 :(得分：0)
您可以在放大和缩小时使用容器类作为中心滑块
<div class="container-fluid">
<div class="slider">
<div> <img src="LED-web-banner-updated-1.jpg" title="banner" class="img-responsive"></div>
<div><img src="Lighting_mainBanner.png" title="mainbanner" class="img-responsive" ></div>
<div><img src="Stealth_mainbanner.PNG" title="another banner" class="img-responsive"></div>
</div>
</div>