居中在另一个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不会留在它的顶部空间？

来源

2010-01-14 VansFannel

你到底在问什么？ – SLaks 2010-01-14 18:14:10

我在垂直询问中心。 – VansFannel 2010-01-14 20:09:46

你的问题不清楚。

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

来源

2010-01-14 18:15:42 SLaks

对于水平居中，可以使用文本对齐：在内联元素或边距上居中：0在容器和块级元素上设置宽度。

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

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

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

来源

2010-01-14 18:17:42 DeaconDesperado

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

来源

2010-01-14 18:21:49

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

来源

2010-01-14 22:01:20

你试过了吗？我正在使用Internet Explorer 8和Firefox 3.5.7，并且此解决方案不起作用。我使用的是萤火虫，我发现divHeaderText不在divHeader中。 – VansFannel 2010-01-15 16:22:00

居中在另一个div内的div

回答

相关问题