本文探讨如何使用CSS实现一个具有3个.profilebox元素的div在不同屏幕尺寸下的居中和响应式布局。目标是在大屏幕上一行为三列，在笔记本电脑屏幕上变为两行（上两下一），在平板电脑和移动设备上则每行显示一个元素，并保持垂直居中。目前的代码已部分实现了布局，但需要进一步调整以适应各种屏幕大小。作为Web开发新手，作者正在寻求帮助完善这个布局方案。
如何在任何屏幕上将具有3个.profilebox元素的div居中？并使其具有响应性？
?大屏幕：一行包含我的3个元素
?笔记本电脑屏幕：两行(第一行2个元素,下方1个元素)
?平板电脑和移动设备：3行,每行一个元素垂直对齐(居中)
您可以在这里查看我想要的内容：
Errore Aethiopia dolorum amni
我有3个divs .profilebox用我的图像标题渲染3个框.
CSS：
.centerDiv {
padding-bottom: 200px;
padding-top: 100px;
margin-right: 0 auto;
margin-left: 0 auto;
}
.profilebox {
width: 350;
height: 210;
cursor: pointer;
display: inline-table;
margin-bottom: 100px;
background-image: url("");
background-position: center center;
background-size: cover;
position: relative;
}
.profilebox .profileInfo {
bottom: 0;
height: 50px;
left: 0;
right: 0;
margin: 0 auto;
position: absolute;
width: 88%;
}
有了这段代码,我的盒子就被精心设计了.我的img和标题在正确的位置.现在唯一的事情就是使它在任何情况下都居中.
我是Web开发的初学者,现在我的代码中有些事情可能没有意义.非常感谢你的帮助.
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
