Question

我的网站有两个部分。主体和侧边栏。身体是6英寸，侧边栏可能是200像素。我如何将页面居中？那么左右两侧的空间是否相等？无论解决方案如何，它都应该集中。

使用XHTML 1.0 Strict。应该适用于所有主流浏览器或至少Firefox和Chrome。

Answer 1

如何设置

margin: 0px auto;

到最外面的容器。

<div id="wrapper">
    <div id="side"></div>
    <div id="main"></div>
</div>

#wrapper { margin: 0 auto; width: 800px; }

Answer 2

您可以将左边距和右边距的边距设置为自动：

<div id="wrapper">
  <div id="sidebar"></div>
  <div id="main"></div>
</div>

#sidebar {
    float:left;
    width: 50px;
}
#main {
    width: 150px;
    float:left;
     background-color: yellow;
}
#wrapper {
  margin-left: auto;
  margin-right: auto;
  width: 200px;
}

这也很便携，甚至适用于较旧的IE版本。

更新包装，侧边栏和主要需要有宽度。谷歌有两个列布局，这是一种非常标准的方式。

http://jsfiddle.net/aXLVv/1/ - 看看它的实际效果。

Answer 3

我不认为margin-left：auto;和保证金权利：auto;将工作。你需要一个全局包装器。

Answer 4

body {
    margin-left:  auto;
    margin-right: auto;
}

我该如何居中？

4 个答案: