Question

我在整理我的整个网页模板时遇到了麻烦，我已经创建了一个基本的模拟我希望我的网页看起来像什么但似乎无法居中。

代码如下

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="../css/website_css.css" rel="stylesheet" type="text/css">
<style type="text/css">
body {
    background-color: #000;
}
</style>
</head>

<body>

<div id="container">
<div id="header">

  <div id="nav">
    <p>&nbsp;</p>
    <p>Home | About Us | Events | Gallery | More...
    </p>
  </div> 
  <div id="logotop"><img src="../Images/images/Logotop.png" width="200" height="100"></div>  
</div>

<div id="middletop">

    <div id="logobottom"><img src="../Images/images/Logobottom.png" width="200" height="100"></div>
  <p>&nbsp;</p>
    <p>Page Name</p></div>

<div id="middle">
    <div id="twitter">
      <p>This is where the Twitter link will go      </p>
    </div>
    <div id="facebook">
      <p>This is where the FB link will go      </p>
    </div>
    </div>

<div id="middlebottom">

    <div id="sectionone">
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>Section one text</p>
  </div>
  <div id="sectiontwo">
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>Section two text</p>
  </div>
  </div>
<div id="bottom">


<div id="sectionthree">
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>Section one text</p>
  </div>
  <div id="sectionfour">
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>Section two text</p>
  </div>

</div>

</div>
</body>
</html>

CSS：

@charset "utf-8";
#header {
    height: 100px;
    width: 1200px;
    background-repeat: no-repeat;
    background-color: #000;
}
#logotop {
    height: 100px;
    width: 200px;
    color: #FFF;
    text-align: center;
    padding-left: 200px;
}

#nav {
    float: right;
    height: 100px;
    width: 800px;
    font-family: "Arial Black", Gadget, sans-serif;
    color: #FFF;
    text-align: center;
}
#middletop {
    height: 400px;
    width: 1200px;
    background-color: #000;
    font-family: "Arial Black", Gadget, sans-serif;
    color: #FFF;
    text-align: center;
    font-size: 36px;
    /* [disabled]margin-top: 3px; */
}
#logobottom {
    height: 100px;
    width: 200px;
    padding-left: 200px;
}
#middle {
    height: 50px;
    width: 1200px;
    background-image: url(../Images/images/images/backgrounds_02.png);
    background-repeat: no-repeat;
    color: #000;
}
#facebook {
    font-family: "Arial Black", Gadget, sans-serif;
    color: #000;
    text-align: center;
    height: 50px;
    width: 550px;
}
#twitter {
    font-family: "Arial Black", Gadget, sans-serif;
    color: #000;
    text-align: center;
    float: right;
    height: 50px;
    width: 550px;
}
#middlebottom {
    font-family: "Arial Black", Gadget, sans-serif;
    color: #000;
    height: 225px;
    width: 1200px;
    background-image: url(../Images/images/images/backgrounds_03.png);
}
#sectionone {
    font-family: Arial, Helvetica, sans-serif;
    color: #000;
    float: left;
    height: 225px;
    width: 600px;
    text-align: center;
}
#sectiontwo {
    font-family: Arial, Helvetica, sans-serif;
    color: #000;
    text-align: center;
    height: 225px;
    width: 600px;
    float: right;
}
#bottom {
    height: 225px;
    width: 1200px;
    background-image: url(../Images/images/images/ParanormalWebsiteTempV2_04.png);
    background-repeat: no-repeat;
}
#sectionthree {
    font-family: Arial, Helvetica, sans-serif;
    color: #000;
    text-align: center;
    height: 225px;
    width: 600px;
    float: left;
}
#sectionfour {
    font-family: Arial, Helvetica, sans-serif;
    color: #000;
    text-align: center;
    float: right;
    height: 225px;
    width: 600px;
}
#container {
    height: 1050px;
    width: 1200px;
    text-align: center;
}

提前感谢任何可以帮助我的人:)

Answer 1

尝试

#container {
  width: 1200px;
  margin: 0 auto;
}

Answer 2

在外部元素上设置相等的边距：

#container {margin: 0 auto;}

中心对齐整个网页

2 个答案: