我已经搜索了其他问题，虽然这个问题看起来与其他几个问题类似，但到目前为止我所看到的似乎都没有解决我遇到的问题。
我有一个包含许多其他div的div，每个div都向左浮动。这些div每个都包含一张照片和一个标题。我想要的只是让照片组在包含div中居中。
正如您从下面的代码中看到的那样，我尝试在父div上使用overflow:hidden和margin:x auto，并且我还添加了clear:both（如另一个话题）照片之后。似乎没什么区别。
谢谢。我很感激任何建议。
<div style="position: relative; margin: 0 auto; overflow: hidden; text-align: center;">
<h4>Section Header</h4>
<div style="margin: 2em auto;">
<div style="float: left; margin: auto 1.5em;">
<img src="photo1.jpg" /><br />
Photo Caption
</div>
<div style="float: left; margin: auto 1.5em;">
<img src="photo2.jpg" /><br />
Photo Caption
</div>
<div style="float: left; margin: auto 1.5em;">
<img src="photo3.jpg" /><br />
Photo Caption
</div>
<div style="clear: both; height: 0; overflow: hidden;"> </div>
</div>
</div>
答案 0 :(得分：259)
首先，删除内部float上的div属性。然后，将text-align: center放在主外div上。而对于内div s，
使用display: inline-block。也可能明智地给它们明确的宽度。
<div style="margin: auto 1.5em; display: inline-block;">
<img title="Nadia Bjorlin" alt="Nadia Bjorlin" src="headshot.nadia.png"/>
<br/>
Nadia Bjorlin
</div>
答案 1 :(得分：32)
使用Flexbox，您可以轻松地在div中水平（和垂直）居中浮动的孩子。
所以，如果您有这样的简单标记：
<div class="wpr">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
使用CSS：
.wpr
{
width: 400px;
height: 100px;
background: pink;
padding: 10px 30px;
}
.wpr span
{
width: 50px;
height: 50px;
background: green;
float: left; /* **children floated left** */
margin: 0 5px;
}
（这是（预期 - 和不受欢迎的）RESULT）
现在将以下规则添加到包装器中：
display: flex;
justify-content: center; /* align horizontal */
浮动的孩子会对齐中心（ DEMO ）
只是为了好玩，获得垂直对齐以及添加：
align-items: center; /* align vertical */
答案 2 :(得分：10)
我使用相对定位完成了上述操作并向右浮动。
HTML code：
<div class="clearfix">
<div class="outer-div">
<div class="inner-div">
<div class="floating-div">Float 1</div>
<div class="floating-div">Float 2</div>
<div class="floating-div">Float 3</div>
</div>
</div>
</div>
CSS：
.outer-div { position: relative; float: right; right: 50%; }
.inner-div { position: relative; float: right; right: -50%; }
.floating-div { float: left; border: 1px solid red; margin: 0 1.5em; }
.clearfix:before,
.clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
JSFiddle：http://jsfiddle.net/MJ9yp/
这将在IE8及以上版本中运行，但不会更早（惊喜，惊喜！）
不幸的是，我不记得这种方法的来源，所以我不能赞扬原作者。如果有人知道，请发布链接！
答案 3 :(得分：5)
以下解决方案不使用内联块。但是，它需要两个辅助div：
.ca-outer {
overflow: hidden;
background: #FFC;
}
.ca-inner {
float: left;
position: relative;
left: 50%;
background: #FDD;
}
.content {
float: left;
position: relative;
left: -50%;
background: #080;
}
/* examples */
div.content > div {
float: left;
margin: 10px;
width: 100px;
height: 100px;
background: #FFF;
}
ul.content {
padding: 0;
list-style-type: none;
}
ul.content > li {
margin: 10px;
background: #FFF;
}<div class="ca-outer">
<div class="ca-inner">
<div class="content">
<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
</div>
</div>
</div>
<hr>
<div class="ca-outer">
<div class="ca-inner">
<ul class="content">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Nullam efficitur nulla in libero consectetur dictum ac a sem.</li>
<li>Suspendisse iaculis risus ut dapibus cursus.</li>
</ul>
</div>
</div>
答案 4 :(得分：4)
display: inline-block;无法在任何IE浏览器中使用。这是我使用的。
// change the width of #boxContainer to
// 1-2 pixels higher than total width of the boxes inside:
#boxContainer {
width: 800px;
height: auto;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#Box{
width: 240px;
height: 90px;
background-color: #FFF;
float: left;
margin-left: 10px;
margin-right: 10px;
}
答案 5 :(得分：2)
<强>解决方案：
<!DOCTYPE HTML>
<html>
<head>
<title>Knowledge is Power</title>
<script src="js/jquery.js"></script>
<script type="text/javascript">
</script>
<style type="text/css">
#outer {
text-align:center;
width:100%;
height:200px;
background:red;
}
#inner {
display:inline-block;
height:200px;
background:yellow;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">Hello, I am Touhid Rahman. The man in Light</div>
</div>
</body>
</html>
答案 6 :(得分：1)
在我的情况下，我无法得到@Sampson为我工作的答案，充其量我在页面上有一个列。然而，在这个过程中，我学会了浮动实际如何工作并创建了这个解决方案。在它的核心，修复非常简单但很难找到，这个帖子在这篇帖子的时候有超过146k的观点，而且没有提及。
所需要的只是总计所需布局占用的屏幕空间宽度，然后使父级具有相同的宽度并应用margin：auto。那就是它！
布局中的元素将决定＆＃34;外部＆＃34;的宽度和高度。 DIV。拿每个＆＃34; myFloat＆＃34;或元素的宽度或高度+其边框+其边距及其填充，并将它们全部加在一起。然后以相同的方式将其他元素添加到一起。这将为您提供父宽度。它们都可以有些不同的尺寸，你可以用更少或更多的元素来做到这一点。
Ex。（每个元素都有2个边，所以边框，边距和填充都乘以x2）
因此，宽度为10px，边界为2px，边距为6px，填充3px的元素将如下所示： 10 + 4 + 12 + 6 = 32
然后将所有元素的总宽度加在一起。
Element 1 = 32
Element 2 = 24
Element 3 = 32
Element 4 = 24
在此示例中，＆＃34;外部＆＃34;的宽度div将是112。
.outer {
/* floats + margins + borders = 270 */
max-width: 270px;
margin: auto;
height: 80px;
border: 1px;
border-style: solid;
}
.myFloat {
/* 3 floats x 50px = 150px */
width: 50px;
/* 6 margins x 10px = 60 */
margin: 10px;
/* 6 borders x 10px = 60 */
border: 10px solid #6B6B6B;
float: left;
text-align: center;
height: 40px;
}<div class="outer">
<div class="myFloat">Float 1</div>
<div class="myFloat">Float 2</div>
<div class="myFloat">Float 3</div>
</div>