将浮动的div居中放置在另一个div中

Question

将浮动的div居中放置在另一个div中

htmlcentercss

149

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

我有一个包含许多其他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>

- Darren

可能是重复的问题：如何居中浮动元素？ - TylerH

@TylerH 怎么了？只需要看一下提问的日期就可以了。看起来你链接中的问题才是真正的重复。 - The Pragmatick

@ThePragmatick 因为那个问题的浏览量是这个问题的两倍，回答数量更多，活跃度更高（而且更新时间更近），并且它的措辞更适合作为一个更好的规范问题。 - TylerH

7个回答

34

使用 Flexbox，您可以轻松地在 div 中水平（和垂直）居中 floated children。

如果您有像这样简单的标记：

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

演示

- Danield

仍需检查浏览器兼容性，但这看起来非常棒！ - low_rents

你也可以使用display: inline而不是flex来居中div。Flex在Safari和Opera上存在问题。 - YOU

内联对我不起作用。这种解决方案的问题是，如果框超出div的宽度，则框不会进入第二行。所以你实际上把它们变成了一个表格... - Pavel Jiri Strnad

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及以上版本中运行，但在早期版本中会出现问题（惊讶吧！）

很遗憾我不记得这个方法的来源，所以无法归功于原始作者。如果有人知道，请贴出链接！

- Kendolein

+1 这个方法非常有效。被采纳的答案对我没用，反而导致了垂直对齐问题... - TimH - Codidact

@TimH 我知道我来晚了，但是垂直对齐问题可以通过在容器中添加“vertical-align: top”来解决。 - Alfie

抱歉，我的意思是内部 div，而不是容器 div。 - Alfie

它几乎完美地工作了。如果溢出，项目将转到下一行，但当它们这样做时，它们并没有居中。 - Pavel Jiri Strnad

5

以下解决方案不使用内联块。但是，它需要两个辅助 div：

内容被浮动
内部辅助器被浮动（它会拉伸到与内容一样大）
内部辅助器被向右推 50%（它的左侧与外部辅助器的中心对齐）
内容被向左拉 50%（它的中心与内部辅助器的左侧对齐）
外部辅助器被设置为隐藏溢出

.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>

- Salman A

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

- Abdulla Kaleem

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>

- Touhid Rahman

此解决方案与主题无关。内部应该使用float:left以满足OP的要求。 - s15199d

1

在我的情况下，@Sampson的答案对我没有用，最多只能得到一页居中的单列。然而，在这个过程中，我学会了float的工作原理，并创建了这个解决方案。在其核心部分，修复非常简单，但很难找到，正如本帖子所示，该帖子在发布时已经有超过146k的浏览量，却没有提到这一点。

所需的全部内容是将所需布局占用的屏幕空间宽度总和起来，然后使父元素具有相同的宽度并应用margin:auto。就是这样！

布局中的元素将决定“外部”div的宽度和高度。取每个“myFloat”或元素的宽度或高度+其边框+其边距和填充，然后将它们全部加在一起。然后以同样的方式添加其他元素。这将为您提供父级宽度。它们都可以是稍微不同的大小，并且您可以使用更少或更多的元素进行此操作。

例如(每个元素有2个边，因此边框、边距和填充要乘以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>

- dimmech

这就是我在寻找的答案，谢谢。你如何计算所需的像素？对我来说不太清楚。 - SilverSurfer

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sampson · Accepted Answer

首先，删除内部 div 上的 float 属性。然后，在外部主要的 div 上应用 text-align: center 样式。对于内部的 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>