我遇到了我以前从未见过的问题，我找不到任何关于如何修复它的信息，我已经搜索了两天。
我有一个 wrapper 。在包装器中，有三个 div(new_initiatives、 Logo 和选项)和一个在下面(btns)，包装器结束。粘性页脚位于包装器下方，并为页脚中的列表项使用 flex。
在 btns div 中，我有十二个按钮，我想分两行显示，我希望这些按钮展开以占用可用空间。没问题，我以前做过。但是，这些按钮的作用就像我在页面上将一个 div 居中一样。当我在按钮的右侧添加边距或填充时，它会将一个按钮向下移动到另一行。
我没有将 div 居中，因为它是包装 div 的 100%。唯一居中的 div 是 Logo 。我只是打算使用边距来分隔按钮。我什至尝试使用一张 table ，它做了同样的事情。
CSS 中可能有一些内容，但我现在找不到。我正在发布我的 CSS，但我必须清理 HTML 才能发布它。让我知道我是否应该这样做。也让我知道我错过了什么，包括。
html,
body {
height: 100%;
margin: 0;
}
p,
td,
li,
div {
font: .95em/1.25em verdana, "sans serif";
}
h1 {
font: bold small-caps 1.5em verdana, "sans serif";
padding: .05em 0 .25em 0;
color: #1349B3;
}
h2 {
font: bold small-caps 1em verdana, "sans serif";
padding: .05em 0 .25em 0;
color: #1349B3;
}
#wrapper {
width: 95%;
margin: auto;
min-height: 100%;
}
body>#wrapper {
height: auto;
min-height: 100%;
}
.footer {
height: 160px;
width: 95%;
margin-top: -160px;
margin-left: auto;
margin-right: auto;
position: relative;
background-color: #fff;
border-top: 2px solid red;
}
#initiatives {
width: 23%;
position: relative;
top: 30px;
left: 2px;
float: left;
padding: 10px;
height: 410px;
overflow-y: scroll;
background-color: #FFFB41;
}
#logo {
position: absolute;
top: 30px;
left: 0;
right: 0;
margin: auto;
width: 45%;
height: auto;
}
#option {
width: 23%;
position: relative;
float: right;
top: 30px;
right: 2px;
padding: 10px;
height: 410px;
overflow-y: scroll;
background-color: #B3DEFF;
}
.logo {
width: 100%;
height: 100%;
object-fit: contain;
}
#btns {
width: 100%;
position: relative;
top: 475px;
height: 300px;
padding-top: 10px;
}
/*#btns img {
margin-right: 50px;
}*/
.footer ul {
display: flex;
list-style: none;
flex-direction: column;
flex-wrap: wrap;
height: 100px;
width: 600px;
margin: 10px auto;
align-items: center;
}
.footer ul li {
flex-basis: 25%;
margin: 0 0 5px 0;
}<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="toolbox.css">
<title>Title</title>
</head>
<body>
<div id="wrapper">
<div id="initiatives">
<h1>New initiatives</h1>
</div>
<div id="logo">
<img class="logo" src="images/elect_eng_toolbox.png" />
</div>
<div id="option">
<h1>Options</h1>
</div>
<div id="btns">
<div style="width: 100%; margin: 5px auto;">
<img src="images/btn_blank.png" />
<img src="images/btn_blank.png" />
<img src="images/btn_blank.png" />
<img src="images/btn_blank.png" />
<img src="images/btn_blank.png" />
<img src="images/btn_blank.png" />
</div>
<div style="width: 100%; margin: 5px auto;">
<img src="images/btn_blank.png" />
<img src="images/btn_blank.png" />
<img src="images/btn_blank.png" />
<img src="images/btn_blank.png" />
<img src="images/btn_blank.png" />
<img src="images/btn_blank.png" />
</div>
</div>
</div>
<div class="footer">
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
© Copyright 2017 Southern Company
</div>
</body>
</html>谢谢。
最佳答案
您需要通过将 clear:both 添加到您的 #btns css 或创建一个带有 style="clear:both"的空 div 在您的 #option 下方但仍在您的 #btns 之上来清除 float 。
清除 float 解释起来很复杂，但这里有一个链接 https://css-tricks.com/the-how-and-why-of-clearing-floats/
关于html - 图像自行居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47210671/