无法强制我的浮动 div 始终在 CSS 的容器内居中(是的,我删除了 float: left)
Cannot force my floating divs always to center within container with CSS (yes, I removed float: left)
我在尝试让 CSS 正常工作时遇到了麻烦!我有这个显示面板,每行显示 1-4 个带有 text/image 的单元格。如果我至少有四个电池,它就可以正常工作。但是,如果我需要显示少于 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;
}
}
感谢您的帮助!谢谢!
重要提示:我意识到直到一定宽度(直到大约 850px)方块会居中,但是当宽度超过这个宽度时方块突然跳到远处离开了。
只需将 display: flex;
和 justify-content: center;
应用于这些项目的 直接 父项(即 #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>
我在尝试让 CSS 正常工作时遇到了麻烦!我有这个显示面板,每行显示 1-4 个带有 text/image 的单元格。如果我至少有四个电池,它就可以正常工作。但是,如果我需要显示少于 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;
}
}
感谢您的帮助!谢谢!
重要提示:我意识到直到一定宽度(直到大约 850px)方块会居中,但是当宽度超过这个宽度时方块突然跳到远处离开了。
只需将 display: flex;
和 justify-content: center;
应用于这些项目的 直接 父项(即 #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>