将浮动div集中在另一个div中
我search了其他的问题，虽然这个问题似乎与其他几个类似，但我迄今为止所看到的一切似乎都没有解决我所遇到的问题。
我有一个包含一些其他div的div，每个div都是左移的。 这些div每个包含一张照片和一个标题。 我想要的只是一组照片在包含div的中心。
正如你从下面的代码可以看到的，我已经尝试在父div上使用overflow:hidden和margin:x auto ，并且在照片之后还添加了一个clear:both （正如另一个主题中所build议的那样）。 没有什么似乎有所作为。
谢谢。 我感谢任何build议。
<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>
首先，删除内部div上的float属性。 然后，将text-align: center放在主外部div 。 对于内部div ，使用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>
借助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; }
（这是（预期的和不希望的） 结果 ）
现在将下面的规则添加到包装器中：
display: flex; justify-content: center; /* align horizontal */
和漂浮的孩子得到一致中心（ DEMO ）
只是为了好玩，为了获得垂直alignment，只需添加：
align-items: center; /* align vertical */
DEMO
我使用相对定位完成了上述工作，并向右侧漂移。
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和以上，但不是更早（惊喜，惊喜！）
不幸的是，我不记得这种方法的来源，所以我不能赞扬原作者。 如果其他人知道，请张贴链接！
以下解决scheme不使用内嵌块。 但是，它需要两个帮手div：
- 内容是浮动的
- 内部助手是漂浮的（它的内容和内容一样多）
- 内帮向右推50％（左边与外帮中心alignment）
- 内容拉到50％（其中心与内帮左侧alignment）
- 外部助手设置为隐藏溢出
.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>
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; }
解：
<!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>
在我的情况下，我不能得到@Sampson的答案为我工作，至多我有一个单一的列在页面中心。 然而，在这个过程中，我学会了浮动的实际工作原理并创造了这个解决scheme。 它的核心是修复非常简单，但很难find这个线程已经超过146k的意见，在这个职位的时间没有提到。
所有需要的是总计需要的布局将占用的屏幕空间宽度的数量，然后使父宽度相同，并应用margin：auto。 而已！
.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>
