3

我想知道为什么我的容器不在页面中心。我的宽度为 100%，我的 .body 为 90%，我的 body 内容应为 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;
  }
4

2 回答 2

0

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

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

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

html{text-align:center;}
于 2013-10-17T13:28:35.877 回答
0

这是因为您#header, #TopContainer, #MidContainer向左浮动，并将它们设置为 70% 宽度。我删除了浮动并添加了自动边距。

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

点击小提琴

于 2013-10-17T13:28:48.580 回答