5

我想在页面中间水平和垂直放置一个 HTML 元素，但我很难让它水平对齐。我想将 div “内容”居中。这是我的CSS：

#background
{
position:absolute; 
width:100%; 
height:100%; 
margin:0px; 
padding:0px; 
left:0px; 
right:0px;
z-index:1;
text-align: center;
}

#content
{
margin-left: auto;
margin-right: auto;
 width: 200px;
 z-index: 2;
 position: absolute;
}

这是我的 HTML：

<html>
<head>
<link REL="STYLESHEET" TYPE="text/css" HREF="style/myStyle.css"> 
</head>
<body style="padding:0px; margin:0px; overflow:hidden;"> 


 <div id="background"><img src="images/backgroundimage.png" width="100%" height="100%">

 </div>

 <div id="content">

 <p>Here is some content</p>
 </div>

</body>
</html>

由于 div 必须被定位为绝对，这样做：

 margin: 0 auto;

不会工作。我不知道该怎么办。另外，我希望它垂直位于页面的中心。感谢您的帮助，谢谢。

编辑：我需要将背景放在单独的 div 中，以便它可以重新调整大小，并且如果位置是相对的，则内容不会显示。

4

3 回答 3

6 
<html>
<body> 
 <div id="background">
 <div id="content">
  <p>Here is some content</p>
 </div>     
</div>
</body>
</html>

将内容放在中间的更好结构，不使用 JQuery：

#background{
background: url(images/backgroundimage.png) top no-repeat;
width:100%;
height:100%;
position:relative;
}

#content{
position:absolute;
top:50%;
left:50%;
width :200px;
height:200px;
margin-left:-100px;
margin-top:-100px;
}
于 2012-04-15T22:04:14.317 回答
0

如果您使用 div id 背景作为背景图像，您可以使用 css 设置 div 样式，更多信息请访问w3schools网站。

理想情况下，我会为 body 标签使用背景图像，而不是使用图像创建新的 div。

为了使内容居中，请尝试从我的示例中进行操作。

马特

于 2012-04-15T21:01:11.433 回答
0

尝试将填充设置为更高的数字，填充是屏幕侧面与文本/表格/图片/对象之间的像素数。所以填充应该是，比如20-40。另外，尝试删除绝对位置；它使文本/表格/图片/对象始终位于左侧而不是中间。

于 2015-08-14T21:54:27.750 回答