gpt4 book ai didi

html - 如何使固定大小的正文(或 div)始终位于页面中心(甚至垂直!)

转载 作者:技术小花猫 更新时间:2023-10-29 11:59:26 26 4
gpt4 key购买 nike

我试图让一个 1024x768 的正文始终位于页面的中央(上下间距相同,左右间距也相同),但是我在做这件事时遇到了麻烦。

我使用了 技巧 从顶部间距 50%,然后我将主体(绝对)定位在 -384px,这是 768 的一半。

然而,这种方法给我带来了一个问题:如果你的窗口小于 768px,你会得到一个滚动条,但 body 上侧的一部分会被切掉,无法向上滚动(我仍然可以向下滚动)。

如何解决?

编辑 1:这是一些代码:

可以打印在简单html网页上的html代码:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<style>
/**
* Change the basic background color of the page
*/
html
{
background-color: blue;
}

/**
* Set the body as a 1024 x 768 rectangle in center of the screen
*/
body
{
background-color: red;
font-family: TradeGothic, sans-serif;
margin-left: -512px;
margin-top: -384px;
position: absolute;
height: 768px;
width: 1024px;
left: 50%;
top: 50%;
}
</style>
</head>
<body>
some text
</body>
</html>

最佳答案

添加这个:

html {
position: relative;
min-width: 1024px;
min-height: 768px;
height: 100%;
}

http://jsfiddle.net/thirtydot/TGjN8/9/ (全屏:http://jsfiddle.net/thirtydot/TGjN8/9/show/)

关于html - 如何使固定大小的正文(或 div)始终位于页面中心(甚至垂直!),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9122904/

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