-1

問題が少し変わったので、この質問を編集しました。基本的に margin: 0 auto; 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

これは、トップメニューが少し中央にずれていたので、トップメニューをハックすることで解決しました。

于 2013-07-10T14:15:04.803 に答える
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 に答える