Question

我在这个网站上搜索了大约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;
}

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

我尝试过其他人的一些事情＆＃39;线程，没有任何工作。我做错了什么？

Answer 1

使用margin: 0 auto有一个很好的技巧请查看this site或this site以获取有关该主题的详细说明。

Answer 2

将这3个div放在id为'content'的div中，然后声明一个类似这样的CSS规则：

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

'content'div中的所有内容 - 即您的布局 - 将显示在页面的中心。

边距的auto值是div的中心。

Answer 3

#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;
}

Answer 4

尝试为这些列添加浮动。

EG

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

或者如果你想让它们相互冲洗，那么它们都会向左移动！

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

Answer 5

其核心是保证金：0自动;在父母div。

如果你查看盒子大小，你将节省很多时间和痛苦：border-box;并开始使用百分比和ems而不是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;
}

难以集中我的布局

5 个答案: