gpt4 book ai didi

html - 在页面中间居中 HTML 元素

转载 作者:太空狗 更新时间:2023-10-29 15:51:50 24 4
gpt4 key购买 nike

我想在页面中间水平和垂直放置一个 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 中,以便调整大小,如果位置是相对的,则内容不会显示。

最佳答案

<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;
}

关于html - 在页面中间居中 HTML 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10165952/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com