Question

为什么这个中心不是#block1和#block2？

<div id="superwrapper">
    <div id="wrapper">
        a
        <div id="block1">
            pippo
        </div>
        <div id="block2">
            pluto
        </div>
    </div>
</div>

div#superwrapper {
    width:100%;
    height:210px;
    background-color:#FFFFCC;
    border:dotted;
}

div#wrapper {
    text-align:left;
    width:500px;
    heigth:205px;
    margin:0,auto;
    border:dotted;
}

div#block1 {
    text-align:left;
    float:left;
    width:200px;
    height:200px;
    border:dotted;
}

div#block2 {
    text-align:left;
    float:left;
    width:200px;
    height:200px;
    border:dotted;
}

Answer 1

margin: 0, auto;

这里的逗号不是正确的语法。它应该只是一个空间：

margin: 0 auto;

另外，正如@BillyMoat所指出的那样，heigth应为height。

Answer 2

div#wrapper {
    text-align:left;
    width:500px;
    heigth:205px;
    margin:0 auto;
    border:dotted;
}

Answer 3

您需要在文档的开头声明doctype。

<!DOCTYPE html>

Answer 4

我认为你错过了保证金的单位。尝试类似：

margin: 0px auto;

Answer 5

我刚开始两天前学习CSS并使用这个问题来更熟悉边距。希望我不要把你与下面的陈述混淆。

无论如何，我没有在原始代码中找到任何可以告诉浏览器将block1和block2放入中心的内容。

我的解决方案如下：使用float：right;对于block2。然后为block1和block2添加边距。由于所有块都使用固定宽度，因此可以计算左（block1）和右（block2）边距必须设置为33px。边框需要几个像素（默认=中等;无法找出用于介质的像素数）。最后，它看起来像27px还可以。

这里是代码：

div#superwrapper {
width:100%;
height:210px;
background-color:#FFFFCC;
border:dotted;
}

div#wrapper {
text-align:left;
width:500px;
height:205px;
margin:0 auto;
border:dotted;
}

div#block1 {
text-align:left;
float:left;
width:200px;
height:200px;
border:dotted;
margin: 0 0 0 27px;
}

div#block2 {
text-align:left;
float:right; 
width:200px;
height:200px;
border:dotted;
margin: 0 27px 0 0;
}

希望有帮助并有所作为吗？

为什么没有保证金：0，自动;工作？

5 个答案: