[英]div doesn't center when browser is smaller than min-width
我正在尝试将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 ，一切都可以正常工作：
但是，一旦浏览器的宽度小于min-width ，并且滚动条出现在底部，则div仅位于您看到的空间的中心（当滚动条位于左侧时），而不是居中整体（可滚动）： 有办法解决这个问题吗？
如果您不了解我的问题，请随时提出。
无需为您的身体设置最小宽度，只需添加此宽度
#centered{
max-width: 400px;
width: 100%;
position: relative;
background-color: red;
display: block;
margin: 100px auto;
}
如果对您不起作用，请随时发表评论:)
试试这个
<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>
<div>最小宽度值会增加，但不会恢复到最小宽度
[英]<div> with min-width value grows but then doesn't return to its min-width size
在 col 内时具有最小宽度的 div 的 Bootstrap 水平滚动
[英]Bootstrap horizontal scroll for div with min-width when inside col
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.