0

我在这个网站上搜索了大约 35 分钟，我确信这是一个非常简单的答案，我可能忽略了它，但我无法弄清楚如何使我的布局居中。

这是一个简单的布局，它有一个容器 div，左 div 用于菜单，右 div 用于内容。（这是到目前为止的 CSS ..）

#container {
  text-align:center; 
  width: 960px; 
  background-color:#FFFFFF; 
  margin-right:10px; 
  margin-left:10px; 
  display:block;
}
#left {
  text-align:; 
  width:300px; 
  display:block; 
  background-color:#FFFFFF; 
  padding-left:5px; 
  padding-right:5px;
}
#right {
  text-align:left; 
  padding-left:10px; 
  padding-right:10px; 
  width:620px; 
  display:block;
}

当我保存它并在浏览器中打开时，布局就在左边。我可以添加什么让它去中心？

我从其他人的线程中尝试了一些东西，但没有任何效果。我究竟做错了什么？

4

5 回答 5

0

有一个很好的技巧使用margin: 0 auto.
查看此站点或此站点以获得对该主题的良好解释。

于 2013-08-05T21:45:06.690 回答
0

将这 3 个 div 放入 id 为“content”的 div 中，然后声明如下 CSS 规则：

#content {
   width: <width in px>;
   margin-left: auto;
   margin-right: auto;
}

“内容” div 中的所有内容——即你的布局——将出现在页面的中心。

边距的auto值是 div 的中心。

于 2013-08-05T21:45:21.133 回答
0 
#container {
    width: 960px; 
    background-color:#FFFFFF; 
    margin:0 auto;
}
#container:after{
    content:'';
    display:block;
    clear:both;
}
#left {
    width:300px; 
    float:left;
    padding:0 5px;
}
#right {
    padding:0 10px;
    width:620px; 
    float:right;
}
于 2013-08-05T22:06:44.667 回答
0

尝试给这些列一个浮动。

例如

#left {
  float:left;
}
#right {
  float:right;
}

或者，如果您想让它们彼此齐平而坐，则将它们都向左浮动！

http://codepen.io/alexbaulch/pen/hzwnE

于 2013-08-05T22:15:26.583 回答
0

其核心是 margin: 0 auto; 在父 div 上。

如果您查找 box-sizing:border-box; 会为自己节省很多时间和痛苦。然后您开始使用百分比和 em 而不是 px。相信我。除了偶尔的边框，我不会雇用在任何东西上都有像素的人。另外 - 它更容易。我还建议仅将 id (#) 用于 javascript 和超级特殊情况。坚持使用 .class 是目前的共识。祝你好运！

http://jsfiddle.net/sheriffderek/CN8Ev/

HTML

<div class="container">

    <div class="main">main</div>

    <div class="sub">sub</div>

</div> <!-- .container -->

CSS

*, *:before, *:after {
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    /* google border box - moves padding to the inside of the box */ 
}

.container {
    width: 90%;
    max-width: 60em;
    margin: 0 auto; /* no margin on the top and bottom - auto margin on the sides */
    overflow: hidden; /* shame - google micro clear fix instead */
}

.main {
    width: 70%;
    float: left;
}

.sub {
    width: 30%;
    float: left;
}
于 2013-08-06T01:13:24.230 回答