Question

我有这个简单的HTML页面，由4个相同高度的div组成，彼此坐在上面。所有这些都集中在页面中间。

我的问题： div不在页面中间居中＆amp;由于某种原因，页面顶部有一个填充。

我的代码有什么问题？如何移除顶部白色间隙＆amp;让divs水平对中？不是在IE中，div是居中的＆amp;没有差距，但在Safari，Firefox＆amp; 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>

Answer 1

这是一个分叉的小提琴，只是div标签边缘的样式改为margin：0 auto;

似乎可以解决问题。

<强> jsFiddle

奇怪的顶级差距＆amp;不是居中的CSS

1 个答案: