将浮动div放在另一个div中

Question

我已经搜索了其他问题,虽然这个问题看起来和其他几个问题类似,但到目前为止我看到的任何内容似乎都没有解决我遇到的问题.

我有一个包含许多其他div的div,每个div都向左浮动.这些div每个都包含一张照片和一个标题.我想要的只是让照片组在包含div中居中.

正如你可以从下面的代码中看到的,我已经使用这两种尝试overflow:hidden与margin:x auto父div的,并且我还添加了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>

Answer 1

首先,删除float内部divs 上的属性.然后,穿上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>

Answer 2

使用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)

只是为了好玩,获得垂直对齐以及添加:

align-items: center; /* align vertical */

DEMO

Answer 3

我使用相对定位完成了上述操作并向右浮动.

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及以上版本中运行,但不会更早(惊喜,惊喜!)

不幸的是,我不记得这种方法的来源,所以我不能归功于原作者.如果有人知道,请发布链接!

Answer 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;
}

Answer 5

以下解决方案不使用内联块.但是,它需要两个辅助div:

1. 内容浮动
2. 内部助手是浮动的(它的内容与内容一样多)
3. 内部助手向右推50%(左侧与外部助手中心对齐)
4. 内容向左拉50%(其中心与内部助手的左侧对齐)
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>