gpt4 book ai didi

html - 为什么我的页面不居中?

转载 作者:太空宇宙 更新时间:2023-11-04 13:48:23 25 4
gpt4 key购买 nike

我知道这是一个新手问题,但如果你能帮助我并告诉我我做错了什么,我将不胜感激:

当我尝试使用 HTML 和 CSS 时,我决定创建一个具有固定大小且应位于屏幕中央的页面。为此,我决定通过相对位置放置 [body] 标签,并通过以下方式移动它:

position: absolute;
padding: 1em;
width: 960px;
height: 600px;
left: 50%;
top: 50%;
margin-left: -480px;
margin-top: -300px;

但它并没有像预期的那样工作,这就是我得到的结果:

Screenshot taken from the page

我原本希望看到黄色框在水平和垂直方向上都完美居中,但我发现它稍微偏离了中心。我尝试在 Safari、Firefox 和 Chrome 上加载页面,但我得到了相同的结果,所以我已经怀疑我知道这是我的错:-)

你能帮我解释一下我做错了什么吗?非常感谢

这是我写的页面的完整HTML+CSS代码:

<!DOCTYPE html>
<html>
<head>
<title>Test 1</title>
<meta charset="utf-8">
<style>
html, body {
padding: 0;
margin: 0;
}
html {
background-color: red;
width: 100%;
min-height: 100%;
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
}
body {
padding: 1em;
background-color: yellow;
width: 960px;
height: 600px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -480px;
margin-top: -300px;
}
</style>
</head>
<body>
This is my website
</body>
</html>

最佳答案

那是因为填充。

如果将正文的填充设置为 0,它会起作用(已测试)。

如果您需要填充,请在您的主体内添加一个内部 100% 宽度的 div,并为该内部 div 提供一个填充。

关于html - 为什么我的页面不居中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11566691/

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