我正试图以div为中心。 div的宽度为400pt,主体的宽度至少为500pt,留出最小的空间。在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
,并且滚动条出现在底部,当滚动条在左侧时,div只会在您看到的空间中居中,但不会集中在整个(可滚动)主体的中间:
有没有办法解决这个问题?
如果您不了解我的问题,请随时提问。
答案 0 :(得分:1)
您的身体无需最小宽度,只需添加此
即可#centered{
max-width: 400px;
width: 100%;
position: relative;
background-color: red;
display: block;
margin: 100px auto;
}
如果它不起作用,请随时发表评论:)
答案 1 :(得分:0)
试试这个
<style>
#centered{
position:absolute;
background-color:#ff0000;
width:400pt;
left:calc(50% - 200pt);
height:400pt;
}
@media screen and (max-width: 500pt){
#centered{
width:100%;
left:0px;
}
}
</style>
<body>
<div id="centered">
</div>
</body>