我有一个简单的 HTML 页面,它由 4 个等高的 div 组成,它们彼此重叠并且都位于页面中间。
我的问题:div 没有在页面中间居中并且由于某种原因页面顶部有一个填充。
我的代码有什么问题?如何删除顶部的白色间隙并使 div 水平居中?并不是说在 IE 中,div 居中并且没有出现间隙,而是在 Safari、Firefox 和 Chrome 中出现问题。
JSFiddle:http://jsfiddle.net/S9Khv/embedded/result/
我的代码:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
<!--
html {
margin: 0 auto;
padding: 0 auto;
}
body {
background-color: white;
margin: 0 auto;
padding: 0px 150px 0px 150px;
text-align: center;
}
div {
margin: 0px;
padding: 0px;
}
/*Main Elements*/
.homeContainer {
width: 800px;
}
#header {
height: 400px;
background-color: #000000; /*temporary*/
}
#mainDiv {
height: 600px;
}
#clientDiv {
height: 500px;
}
#footer {
height: 600px;
background-color: RGB(115,115,115); /*temporary*/
}
-->
</style>
</head>
<body>
<div id="header" class="homeContainer">
<p>kjkj</p>
</div>
<div id="mainDiv" class="homeContainer">
<p>kjkj</p>
</div>
<div id="clientDiv" class="homeContainer">
<p>kjkj</p>
</div>
<div id="footer" class="homeContainer">
<p>kjkj</p>
</div>
</body>
</html>
最佳答案
关于html - 奇怪的顶部间隙和不居中的 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8996531/