gpt4 book ai didi

html - 当浏览器小于最小宽度时,div 不会居中

转载 作者:太空宇宙 更新时间:2023-11-04 09:51:39 26 4
gpt4 key购买 nike

我试图让一个 div 居中。 div 的宽度为 400pt,body 的宽度至少为 500pt,留出 min 的空间。 div 周围 50pt。我的代码如下所示:

<html>
<style>
body{
min-width:500pt;
}

#centered{
position:absolute;
background-color:#ff0000;
width:400pt;
left:calc(50% - 200pt);
height:400pt;
}
</style>
<body>
<div id="centered"></div>
</body>
</html>

只要浏览器的宽度大于min-width,一切正常: width > min-width

但是一旦浏览器的宽度小于min-width,并且底部出现滚动条,当滚动条打开时,div 只会在您看到的空间居中左边,但不在整个(可滚动)主体的中间: width < min-width有办法解决这个问题吗?

如果您不明白我的问题,请随时提问。

最佳答案

不需要为你的 body 设置最小宽度,只需添加这个

#centered{   
max-width: 400px;
width: 100%;
position: relative;
background-color: red;
display: block;
margin: 100px auto;
}

如果它不适合您,请随时发表评论:)

关于html - 当浏览器小于最小宽度时,div 不会居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39044935/

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