gpt4 book ai didi

html - 如何使用百分比居中?

转载 作者:可可西里 更新时间:2023-11-01 12:53:25 24 4
gpt4 key购买 nike

作为实验,我一直在尝试使用 CSS 中的百分比将 DIV 置于 BODY 标记的中心。我想我曾经想通了,但由于 TopStyle 的魔力,一旦你保存就没有历史,我把它弄丢了。

所以,这是我的 HTML:

<html>
<head>
<link href="shadow.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="box"></div>
</body>
</html>

还有,这是我的 CSS:

*
{
margin: 0;
padding: 0;
}

body
{
background-color: #EEEEEE;
margin: 10%;
}

div#box
{
position: absolute;
background-color: #FFFFFF;
width: 740px;
min-width: 80%;
min-height: 80%;
border: #CCCCCC thin solid;
}

回答您的直接问题:

为什么我要在盒子上使用绝对定位?
这样盒子即使没有内容也能接受 80% 的高度。

为什么我的 width、min-width 和 min-height 是这样的?
因为我希望盒子 DIV 占用 80% 的可用空间,所以使用最小值是有意义的。我正在使用像素宽度来确保无论区域变得多小,它都不会比 740px 更薄,从而导致浏览器激活水平滚动条。理论上,如果内容推送超过可用区域的 80%,它们的内容高度应该激活垂直滚动条。

现在的诀窍是让它死点居中并在盒子周围保持 10% 的空间。我试过应用“ margin :10%;”到 BODY,然后是“填充:10%;”到 BODY,最后“margin: 10%”到方框 DIV。所有这些选择都给了我相同的结果:它水平居中但在垂直方向上表现得很奇怪。我没有得到四面八方的空间。唯一符合预期的是盒子 DIV 确实使用了 80% 的可用空间。

看来这应该是对的。方框 DIV 占 80%,边距各占 10%(垂直 20%,水平 20%),即 100%。不确定为什么它不起作用。

我发誓我曾经以类似的方式工作过,但现在我失去了它。

有没有人解释为什么百分比显示不正确以及我需要什么解决方案?

谢谢!

最佳答案

像这样尝试:

*
{
margin: 0;
padding: 0;
}

body { background-color: #EEEEEE; }

div#box
{
position: absolute;
border: #CCCCCC thin solid;

top: 10%;
left: 10%;

width: 80%;
height: 80%;

min-width: 740px;
min-height: 500px;
}

IE 将允许 DIV 缩小到您的限制以下,因为最小宽度和最小高度不起作用。

关于html - 如何使用百分比居中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5285709/

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