margin：0 auto;不是因为它应该

-1

好吧我已经编辑了这个问题，因为问题稍有改变。基本上保证金：0汽车;在2个元素上不适合我。他们不会在页面中间居中。我想这个jsfiddle展示了一个很好的例子http://jsfiddle.net/Hr4uK/1/想象一下，整个顶部的红色盒子居中，其他每个div都略微漂浮在右边。margin：0 auto;不是因为它应该

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>

来源

2013-07-08 JFar_13

小心设置一个只包含相关位的[jsfiddle]（http://jsfiddle.net/）？我不知道你指的是哪个“两个div”，因为你发布的代码中有很多div。 –

我做了一个小提琴http://jsfiddle.net/ZLGM9/ – Adam

对不起，今天没有得到我的希望！我已经更新了jsfiddle来显示问题，但删除了所有复杂的东西，只是在底部使用了一个图像（浅蓝色条），因为您可以看到它只是没有达到正确的宽度。图像本身是990px –

这是通过与顶部菜单黑客解决，因为它是这是稍微不集中。

来源

2013-07-10 14:15:04

您需要设置宽度img元素。

没有这样做，img会占用它的自然宽度。（这就是为什么它被预先伸出来）

FIDDLE

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

来源

2013-07-08 12:19:58 Danield

感谢fellas的回复，我现在有sliderframe div和图像相同的宽度，但问题是两个ar enot正确居中。如果你看直播页面，它们都是相同的宽度，但顶部菜单居中，并且你可以看到sliderframe div和图像不在页面中心http://www.paycoservices.co.uk/ newsliderdev.asp＃。Udq1thYSyS1 –

我不知道你想要什么。所以我假设你想div.two-step与其他divs对齐。

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

#sliderFrame {保证金：0汽车;宽度：990px}

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

我也迫使990px宽图像的宽度为968 ... 做什么，我想你想要的。看小提琴

http://jsfiddle.net/Hr4uK/

来源

2013-07-08 12:28:52 Raffael

滑动div用于整体'可折叠'块设置，基本上当您单击蓝色图像出现另一个框时，单击该按钮，然后出现另一个等（slidingDiv，slidingDiv1，slidingDiv2等 –

然后为什么ist在小提琴中？ – Raffael

这是在错误的地方开始，现在不存在了，基本上我现在排序了，除了我现在有sliderframe div和图像宽度相同但是问题都是正确居中的。实时页面，它们都是相同的宽度，但顶部菜单居中，并且您可以看到sliderframe div和图像未居中在页面上paycoservices.co.uk/newsliderdev.asp#.Udq1thYSyS1 –

margin：0 auto;不是因为它应该

回答

相关问题