Question

是什么导致以下内容无法居中整个页面？

  <html>

    <style type="text/css">
    .col {
        width: 250px; 
        float: left
    }
    </style>

    <body>

    <div style="width=500px;margin:0 auto;">

    <p style="float:left;text-align:right;width:120px;line-height: 26px;">

</p>

<p style="float:left;width:150px;margin-left:20px;">

</p>

<div style="clear:both;"></div>

<div class="col">
<p>

</p>
</div>

<div class="col">
<p>

</p>
</div>

</div>

</body>

</html>

Answer 1

应该是width:500px而不是width=500px。

您使用的是内联样式，这是一种不好的做法。

写下这个：

.wrapper{width:500px;margin:0 auto;background:#eee;}

Fiddle here.

Answer 2

我认为一个原因是因为你的大部分div已经浮出水面。如果你浮动一切然后使用margin: 0 auto;它将无效，因为的浮动属性。您是否尝试制作某个列布局（2或3）？

尝试使用div来创建列并使用float属性

正确对齐它们

Div包装器不以所有页面内容为中心

2 个答案: