click fiddle

Question

我想知道为什么我的容器不在页面中心。我的宽度为100％，我的身体为90％，身体内容应为70％。内容集中在它的容器中。但出于某种原因，我的.body并没有集中在页面上。所以我试图将我的.body以及其中包含的元素集中在一起。

我尝试了我的.body和#header {margin：0 auto;}（没有用）

HTML5代码：<body class="body"> `

    <section id="header" class="group">
     <header><h2><a href="http://www.epicforever.com">My Name</a></h2>
     </header>
     <nav class="main">
      <ul class="group">
       <li><a href="#">Contact</a></li>
       <li><a href="#">About</a></li>
       <li class="active"><a href="#">Home</a></li>
      </ul>
     </nav>

   </section>
   <section id="TopContainer" class="group"> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh      
    liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id      
    quod mazim placerat facer possim assum. Typi non habent claritatem insitam.</p>   
   </section><section id="MidContainer" class="group"></section>
  </body>`

CSS3代码：
HTML { 宽度：100％; }

body{
background-image: url("img/bg.png");
font-family: arial, 'Lucida Sans Unicode';
font-size: 87.5%;
line-height: 15px;
text-align: left;
color: #000305;
}

a{
text-decoration: none;
}

a:link, a:visited{
/*Fill in*/
}

a:hover, a:active{
/*Fill in*/
}

.body{
width: 90%;
margin: 1% auto;
height: 100%;
 }

 #header, #TopContainer, #MidContainer, #AboutContainer, #ContactContainer{
width: 70%;
 }

 #header{
height: 100px;
padding: 0 10% 10% 10%;
float: left;
line-height: 42px;
background-color: #fff;
 }

  #TopContainer{
height: 150px;
margin: 10% 0 0 0;  
padding: 0 10% 10% 10%;
float: left;
line-height: 42px;
background-color: #fff;
  }

Answer 1

我通常不喜欢以这种方式摆弄身体，我建议创建一个内部包含元素并将这些样式应用到那里。

<body>
    <page>
    ....
    </page>
</body>

但回到你的问题，我认为这会有所帮助：

html{text-align:center;}

Answer 2

这是因为你向左浮动#header, #TopContainer, #MidContainer，并将它们设置为70％宽度。我删除了浮动并添加了自动保证金。

#header, #TopContainer, #MidContainer, #AboutContainer, #ContactContainer{
  width: 70%;
  margin: 0 auto;
}

为响应式网站创建宽度相等的容器（％）

2 个答案:

click fiddle