Question

好的我已经编辑了这个问题，因为问题略有改变。基本保证金：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>

Answer 1

您需要在img元素上设置宽度。

如果不这样做，img会占用它的自然宽度。（这就是事先突然出现的原因）

<强> FIDDLE

#sliderFrame, .two-step, img
{
    margin: 0 auto; 
    width:968px;
}

Answer 2

我不确定你想要什么。所以我假设您希望div.two-step与其他div对齐。

你的CSS .slidingDiv中有一个类但它没有在你的HTML中使用...

#sliderFrame {margin：0 auto;宽度：990px}

.two-step {
width: 968px;
margin: 0 auto;
}

我还强迫990px宽图像的宽度为968 ... 做我认为你想要的。看看小提琴

http://jsfiddle.net/Hr4uK/

Answer 3

通过使用顶层菜单进行黑客攻击解决了这个问题，因为它略微没有居中。

保证金：0自动;不要做它应该做的事

3 个答案: