我想在页面中间水平和垂直放置一个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中,以便它可以重新调整大小,并且内容不会显示位置是否相对.
小智 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;
}