-1

好的,我已经编辑了这个问题,因为问题略有变化。基本上保证金: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>
4

3 回答 3

1

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

如果不这样做,img 将占据它的自然宽度。(这就是为什么它事先突出)

小提琴

#sliderFrame, .two-step, img
{
    margin: 0 auto; 
    width:968px;
}
于 2013-07-08T12:19:58.087 回答
0

我不确定你想要什么。所以我假设你希望div.two-step与其他 div 保持一致。

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

#sliderFrame {边距:0自动;宽度:990px​​}

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

我还强制将 990px​​ 宽图像的宽度设置为 968 ......我认为你想要的。看小提琴

http://jsfiddle.net/Hr4uK/

于 2013-07-08T12:28:52.520 回答
0

这可以通过修改顶部菜单来解决,因为它稍微没有居中。

于 2013-07-10T14:15:04.803 回答