将浮动div集中在另一个div中

我search了其他的问题,虽然这个问题似乎与其他几个类似,但我迄今为止所看到的一切似乎都没有解决我所遇到的问题。

我有一个包含一些其他div的div,每个div都是左移的。 这些div每个包含一张照片和一个标题。 我想要的只是一组照片在包含div的中心。

正如你从下面的代码可以看到的,我已经尝试在父div上使用overflow:hiddenmargin: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:

  1. 内容是浮动的
  2. 内部助手是漂浮的(它的内容和内容一样多)
  3. 内帮向右推50%(左边与外帮中心alignment)
  4. 内容拉到50%(其中心与内帮左侧alignment)
  5. 外部助手设置为隐藏溢出
 .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> 
    Interesting Posts