好的,我已经编辑了这个问题,因为问题略有变化。基本上保证金:0自动;在 2 个元素上不适合我。他们只是不会在页面中间居中。我想这个 jsfiddle 展示了一个很好的例子http://jsfiddle.net/Hr4uK/1/想象一下顶部的红色框居中,每个其他 div 稍微向右浮动。
CSS:
#sliderFrame {margin: 0 auto; width:990px;} /*remove the "margin:0 auto;" if you want to align the whole slider to the left side*/
.two-step {
width:990px;
background-color: #CADDC0;
margin: 0 auto;
border-bottom:5px solid #CADDC0;
}
.var {
width: 990px;
}
.topimage {
margin: 0 auto;
width:990px;
}
HTML:
<div id="topimage">
<img src="http://www.paycoservices.co.uk/images/test1.jpg" />
</div>
<div id="sliderFrame">
<div id="ribbon"></div>
<div id="slider">
<a href="http://www.menucool.com/jquery-slider" target="_blank">
<img src="http://www.paycoservices.co.uk/jsImgSlider/images/image-slider-1.jpg" alt="Welcome to Menucool.com" />
</a>
<img src="http://www.paycoservices.co.uk/jsImgSlider/images/image-slider-2.jpg" alt="" />
<img src="http://www.paycoservices.co.uk/jsImgSlider/images/image-slider-3.jpg" alt="Pure Javascript. No jQuery. No flash." />
<img src="http://www.paycoservices.co.uk/jsImgSlider/images/image-slider-4.jpg" alt="#htmlcaption" />
<img src="http://www.paycoservices.co.uk/jsImgSlider/images/image-slider-5.jpg" width="968" />
</div>
<div id="htmlcaption" style="display: none;">
<em>HTML</em> caption. Link to <a href="http://www.google.com/">Google</a>.
</div>
</div>
<div class="two-step">
<a href="#"><img src="http://www.paycoservices.co.uk/images/2-step-sfinder.png" width="968" height="100" class="show_hide" alt="3 steps" /></a>
</div>