148

我搜索了其他问题，虽然这个问题似乎与其他几个问题相似，但到目前为止我所看到的似乎都没有解决我遇到的问题。

我有一个 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>
4

7 回答 7

272

首先，去掉floatinner divs 上的属性。然后，穿上text-align: center主外层div。对于内部divs，使用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>
于 2009-08-12T23:22:08.660 回答
34

使用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 */

并且浮动的孩子对齐中心（演示）

只是为了好玩，要获得垂直对齐，只需添加：

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

演示

于 2014-03-06T07:46:24.283 回答
11

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

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 及更高版本，但不能更早（惊喜，惊喜！）

不幸的是，我不记得这种方法的来源，所以我不能相信原作者。如果有其他人知道，请发链接！

于 2014-02-13T10:37:29.980 回答
5

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;
}
于 2012-08-20T14:31:05.930 回答
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>

于 2014-11-22T12:49:50.453 回答
3

解决方案：

<!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>
于 2013-05-23T06:19:22.833 回答
1

就我而言，我无法得到@Sampson 的答案来为我工作，充其量我得到一个位于页面中心的列。然而，在这个过程中，我了解了浮动的实际工作原理并创建了这个解决方案。从本质上讲，修复非常简单，但很难从这个线程中找到，该线程在本文发布时的浏览量已超过 146k，没有提及。

所需要的只是合计所需布局将占用的屏幕空间宽度，然后使父级宽度相同并应用边距：自动。就是这样！

布局中的元素将决定“外部”div 的宽度和高度。取每个“myFloat”或元素的宽度或高度+它的边框+它的边距和它的填充并将它们加在一起。然后以相同的方式将其他元素添加在一起。这将为您提供父宽度。它们的大小都可能有所不同，您可以使用更少或更多的元素来做到这一点。

例如（每个元素都有 2 条边，因此边框、边距和内边距乘以 x2）

所以一个宽度为 10 像素、边框 2 像素、边距 6 像素、内边距 3 像素的元素看起来像这样：10 + 4 + 12 + 6 = 32

然后将所有元素的总宽度加在一起。

Element 1 = 32
Element 2 = 24
Element 3 = 32
Element 4 = 24

在本例中，“外部”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>

于 2016-08-25T03:15:02.797 回答