[英]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.