使浮动div在另一个div中居中
我已经搜索了其他问题，虽然这个问题似乎与其他几个问题相似，但到目前为止，我所看到的似乎没有解决我所遇到的问题。
我有一个包含许多其他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>回答 3
Stack Overflow用户
发布于 2014-02-13 18:37:30
我使用相对定位和向右浮动来完成上面的操作。
HTML代码：
<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和更高版本中工作，但不会更早(令人惊讶，令人惊讶！)
不幸的是，我不记得这种方法的来源了，所以我不能将功劳归功于原始作者。如果其他人知道，请贴上链接！
Stack Overflow用户
发布于 2012-08-20 22:31:06
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;
}Stack Overflow用户
发布于 2016-08-25 11:15:03
在我的例子中，我不能通过@Sampson得到答案为我工作，我最多得到一个页面居中的单列。然而，在这个过程中，我了解了浮动的实际工作原理，并创建了这个解决方案。在它的核心，修复是非常简单的，但很难找到，从这个帖子可以明显看出，这个帖子在没有提到的情况下已经有超过146k的浏览量。
所有需要做的就是将所需布局占用的屏幕空间宽度合计，然后使父布局具有相同的宽度，并应用make :auto。就这样!
布局中的元素将决定“外部”div的宽度和高度。取每个"myFloat“或元素的宽度或高度+它的边框+它的边距和填充，并把它们加在一起。然后以相同的方式将其他元素添加到一起。这将为您提供父级宽度。它们都可以有一些不同的大小，你可以用更少或更多的元素来做到这一点。
例如(每个元素都有两条边，因此边框、边距和填充都会乘以x2)
因此，宽度为10px、边框为2px、边距为6px、填充为3px的元素将如下所示: 10 +4+ 12 +6= 32
然后将所有元素的总宽度相加在一起。
Element 1 = 32
Element 2 = 24
Element 3 = 32
Element 4 = 24在本例中，"outer“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>
https://stackoverflow.com/questions/1269245
复制相似问题