【发布时间】：2014-06-04 20:12:44
【问题描述】：
我在将整个网页模板居中对齐时遇到问题，我已经创建了一个我希望我的页面看起来像但似乎无法居中的基本模型。
代码如下
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> </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> </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> </p>
<p> </p>
<p>Section one text</p>
</div>
<div id="sectiontwo">
<p> </p>
<p> </p>
<p>Section two text</p>
</div>
</div>
<div id="bottom">
<div id="sectionthree">
<p> </p>
<p> </p>
<p>Section one text</p>
</div>
<div id="sectionfour">
<p> </p>
<p> </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;
}
提前感谢任何可以帮助我的人:)
【问题讨论】：
-
完整的代码转储并不是那么有用 - 如果您可以将其缩小到具体细节，对我们来说会更容易，因此您会更快地得到答案。
-
#container {高度：1050px;宽度：1200 像素；边距：0 自动；文本对齐：左；} 正文 { 文本对齐：中心}
-
这里是上面代码jsfiddle.net/FsYEw/1的小提琴
标签： html css containers center