这些是我的代码，先是 CSS，然后是 html 代码。
我想要做的是将边框居中放在边框内，并防止它们在我缩小窗口大小时被其他边框插入。
这是使他们的位置固定并在任何窗口大小下保持在他们的位置。
我已经尝试了所有我知道的使边框居中的方法，并且边距会起作用，但是边距的东西需要取决于计算机屏幕的大小，这意味着如果我在较小的计算机屏幕上打开我的网站，它就不会居中。
所以我希望我的图像位于中心并自动适应任何尺寸的屏幕和窗口。
它看起来像这样，即使我缩小窗口和任何其他更小或更大尺寸的计算机屏幕也会保持不变
谢谢!!
#bodybox2{
border-top:1px solid black;
width:90%;
margin-top:5%;
padding:5%;
background-color:grey;
overflow:hidden;
}
.imagebox{
border:10px solid black;
text-align:center;
width:100%;
margin-left:auto;
margin-right:auto;
overflow:hidden;
}
.image{
float:left;
text-align:center;
font-size:2em;
border:1px solid black;
}
.imageclear{
clear:left;
float:left;
text-align:center;
font-size:2em;
border:1px solid black;
}
<div id='bodybox2'>
<div class="imagebox">
<span class="image"><img src="women.jpg" width="300" height="400"><br<br>Pretty Girl</span>
<span class="image"><img src="womenwithumbrella.jpg" width="300" height="400"><br><br>Pretty Girl</span>
<span class="image"><img src="women1.png" width="300" height="400"><br><br>Pretty Girl</span>
</div>
<div class="imagebox">
<span class="imageclear"><img src="shoe.jpg" width="300" height="400"><br><br>Pretty Girl</span>
<span class="image"><img src="women2.jpg" width="300" height="400"><br><br>Pretty Girl</span>
<span class="image"><img src="menshirt.jpg" width="300" height="400"><br><br>Pretty Girl</span>
</div>
<div class="imagebox">
<span class="imageclear"><img src="shoe.jpg" width="300" height="400"><br><br>Pretty Girl</span>
<span class="image"><img src="women2.jpg" width="300" height="400"><br><br>Pretty Girl</span>
<span class="image"><img src="menshirt.jpg" width="300" height="400"><br><br>Pretty Girl</span>
</div>
</div>
最佳答案
显然，Paulie_D 不知道如何单击链接。 所以给你:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
#bodybox2{
border-top:1px solid black;
width:90%;
margin-top:5%;
padding:5%;
background-color:grey;
overflow:hidden;
}
.imagebox{
border:10px solid black;
text-align:center;
width:100%;
margin-left:auto;
margin-right:auto;
overflow:hidden;
display: flex;
justify-content: center;
}
.image{
float:left;
text-align:center;
font-size:2em;
border:1px solid black;
}
.imageclear{
clear:left;
float:left;
text-align:center;
font-size:2em;
border:1px solid black;
}
</style>
</head>
<body>
<div id='bodybox2'>
<div class="imagebox">
<span class="image"><img src="women.jpg" width="300" height="400"><br<br>Pretty Girl</span>
<span class="image"><img src="womenwithumbrella.jpg" width="300" height="400"><br><br>Pretty Girl</span>
<span class="image"><img src="women1.png" width="300" height="400"><br><br>Pretty Girl</span>
</div>
<div class="imagebox">
<span class="imageclear"><img src="shoe.jpg" width="300" height="400"><br><br>Pretty Girl</span>
<span class="image"><img src="women2.jpg" width="300" height="400"><br><br>Pretty Girl</span>
<span class="image"><img src="menshirt.jpg" width="300" height="400"><br><br>Pretty Girl</span>
</div>
<div class="imagebox">
<span class="imageclear"><img src="shoe.jpg" width="300" height="400"><br><br>Pretty Girl</span>
<span class="image"><img src="women2.jpg" width="300" height="400"><br><br>Pretty Girl</span>
<span class="image"><img src="menshirt.jpg" width="300" height="400"><br><br>Pretty Girl</span>
</div>
</div>
</body>
</html>
如果您希望它们居中，请检查justify-center: space-between。
关于HTML 边框 float 中心位置固定，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53652155/