Question

我正在尝试将div设置在另一个div中。

这是html页面：

<body>
<div id="divParent">
    <div id="divHeader" >
        <div id="divHeaderText">
        </div>
    </div>
    <div id="divBody">
    </div>
</div>
</body>

这就是风格：

#divHeader {
    background-color: #C7C7C7;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    height: 80px;
    margin-bottom: 2px;
}
#divBody {
    background-image: url('images/GradientBackground.png');
    background-repeat: repeat-x;
    height: 300px;
}
#divHeaderText {
    margin: auto;
    width: 90%;
    height: 80%;
    background-color: #00FF00;
}

为什么最小的div不会在其顶部留下空间？

Answer 1

你的问题不清楚。

如果您尝试将#divHeaderText垂直居中于#divHeader，请尝试添加margin-top: 13px;。

Answer 2

margin：auto不适用于垂直对齐。你必须在px，em等中给出一个确切的数字。在你的例子中，这应该不是问题，因为你知道父容器的高度。

Answer 3

对于水平居中，您可以在内联元素或边距上使用text-align：center：0 auto，在容器和块级元素上设置宽度。

对于文本的垂直居中，可以将line-height属性设置为等于包含div的高度。

要将div水平居中，您可以应用margin-top属性将其移到中心。

请注意，设计问题更适合http://www.doctype.com/，因为SO主要面向服务器端语言和应用程序编程。

Answer 4

#divHeaderText {
margin: auto;
width: 90%;
height: 64px; /* 80% of 80px */
margin-top: 8px; /* (80 - 64) / 2 = 8 */
background-color: #00FF00;
}

将div放在另一个div内

4 个答案: