如何解决不能用 CSS 强制我的浮动 div 总是在容器内居中是的,我删除了浮动:左
我在尝试使用 CSS 使事情正常工作时遇到了麻烦!我有这个显示面板,每行显示 1-4 个带有文本/图像的单元格。如果我有至少四个单元格,它就可以正常工作。但是如果我需要显示少于 4 个 (display=none),单元格会向左对齐,我希望它们居中。
这是我目前的 HTML 和 CSS:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta http-equiv="X-UA-Compatible" content="IE=edge">
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="OEPanel.js"></script>
<link rel="stylesheet" href="./OEPanel.css">
<title>Document</title>
</head>
<body>
<div id="oepanelcontainer" class="OEContainer clearfix">
<div id="oepanel" class="OEItems clearfix">
<div id="oecell1" class="OECell"></div>
<div id="oecell2" class="OECell"></div>
<div id="oecell3" class="OECell" style="display:none;" ></div>
<div id="oecell4" class="OECell" style="display:none;" ></div>
</div>
</div>
</body>
</html>
CSS:
.OEContainer {
background-color: beige;
min-height: 10em;
vertical-align: middle;
padding: 10px;
max-width:1130px;
margin:auto;
text-align:center;
justify-content:space-between;
}
.OEItems {
min-height: 10em;
vertical-align: middle;
padding: 0px;
max-width:1130px;
margin:auto;
text-align:center;
justify-content:space-between;
}
.clearfix::after { /* clearfix class to expand the element back to its normal height */
content: '';
display: block;
clear: both;
}
.OECell {
background-color: lightblue;
min-height: 10em;
vertical-align: middle;
padding: 0px;
width:250px;
text-align:center;
/* float: left; */
margin: 5px;
}
@media (max-width: 500px) {
.OEContainer {
flex-direction: column;
align-items: center;
}
}
感谢您的帮助!谢谢!
重要提示:我意识到,直到达到一定的宽度(直到大约 850 像素),块才会居中,但是当宽度比这更宽时,块会突然跳到最左边。
解决方法
只需将 display: flex;
和 justify-content: center;
应用到这些项目的 direct 父项(即 #oepanel
)。无需浮动。
评论后添加:可以在添加flex-wrap的地方添加媒体查询:wrap;到一定宽度以下的规则。 (在您自己的媒体查询中在下面完成)
.OEContainer {
background-color: beige;
min-height: 10em;
vertical-align: middle;
padding: 10px;
max-width: 1130px;
margin: auto;
text-align: center;
justify-content: space-between;
}
#oepanel {
display: flex;
justify-content: center;
}
.OEItems {
min-height: 10em;
vertical-align: middle;
padding: 0px;
max-width: 1130px;
margin: auto;
text-align: center;
justify-content: space-between;
}
.clearfix::after {
/* clearfix class to expand the element back to its normal height */
content: '';
display: block;
clear: both;
}
.OECell {
background-color: lightblue;
min-height: 10em;
vertical-align: middle;
padding: 0px;
width: 250px;
text-align: center;
/* float: left; */
margin: 5px;
}
@media (max-width: 500px) {
.OEContainer {
flex-direction: column;
align-items: center;
}
#oepanel {
flex-wrap:wrap;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="OEPanel.js"></script>
<link rel="stylesheet" href="./OEPanel.css">
<title>Document</title>
</head>
<body>
<div id="oepanelcontainer" class="OEContainer clearfix">
<div id="oepanel" class="OEItems clearfix">
<div id="oecell1" class="OECell"></div>
<div id="oecell2" class="OECell"></div>
<div id="oecell3" class="OECell" style="display:none;"></div>
<div id="oecell4" class="OECell" style="display:none;"></div>
</div>
</div>
</body>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。