居中在另一个div内的div
问题描述:
我试图在另一个div内居中设置一个div。居中在另一个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不会留在它的顶部空间?
答
你的问题不清楚。
如果您尝试将#divHeaderText
垂直居中于#divHeader
之内,请尝试添加margin-top: 13px;
。
答
对于水平居中,可以使用文本对齐:在内联元素或边距上居中:0在容器和块级元素上设置宽度。
对于文本的垂直居中,可以将line-height属性设置为等于包含div的高度。
要水平居中div,您可以应用margin-top属性将它隔开到中心。
请注意,设计问题更适合于http://www.doctype.com/,因为SO主要面向服务器端语言和应用程序编程。
答
margin:auto不适用于垂直对齐。您必须在px,em等中给出确切的数字。在您的示例中,这不应该成为问题,因为您知道父容器的高度。
答
#divHeaderText {
margin: auto;
width: 90%;
height: 64px; /* 80% of 80px */
margin-top: 8px; /* (80 - 64)/2 = 8 */
background-color: #00FF00;
}
+0
你试过了吗?我正在使用Internet Explorer 8和Firefox 3.5.7,并且此解决方案不起作用。我使用的是萤火虫,我发现divHeaderText不在divHeader中。 – VansFannel 2010-01-15 16:22:00
你到底在问什么? – SLaks 2010-01-14 18:14:10
我在垂直询问中心。 – VansFannel 2010-01-14 20:09:46