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

142

我搜索了其他问题，尽管这个问题似乎与其他几个问题相似，但到目前为止，我所看到的任何问题似乎都无法解决我遇到的问题。

我有一个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>
html  center  css 
— 达伦
source
— TylerH，2014年
@TylerH怎么来？只要查看询问的日期即可。好像您链接中的问题是真实重复项。
— The Pragmatick
@ThePragmatick因为那个人有两倍的观点，更多的答案，更多的（和最近的）活动，并且它的措辞比这个更好。
— TylerH 2015年

Answers:

266

首先，删除float内部div的属性。然后，穿上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>
— 桑普森
source
6
@Darren：尝试时您是否停止漂浮？只要您正在浮动，就无法完成所需的操作，除非您/在浮动对象的容器上设置了固定的宽度。
— 肯·布朗宁
1
哦，我错了。删除浮动对象似乎完全可以实现我想要的功能。我不确定我是否理解为什么，但是...非常感谢。
— 达伦（Darren）
9
@Darren，请注意，在我的代码示例中，我没有包含float;）下次请仔细阅读，它可以为您省去一些麻烦：)不过，您很高兴找到了它。保持良好的工作状态，欢迎来到SO。
— 桑普森
2
当某些图像标题足够长以换行时，此方法开始失败。还有其他建议吗？
— greg.kindel 2011年
3
没关系，发现可以使用“ vertical-align：top”解决行数可变字幕问题。=）
— greg.kindel 2011年
33

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

演示

— 丹尼尔
source
仍然必须检查浏览器的兼容性，但这似乎很棒！
— low_rents
您也可以使用display：inline而不是flex来居中div。Flex在野生动物园和Opera方面存在问题。
— 您
内联对我不起作用。该解决方案的问题在于，如果框超出了div的宽度，则框不会到达第二行。所以你实际上把它们变成了桌子...
— Pavel Jiri Strnad
10

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

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

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

— 肯多林
source
+1效果不错。接受的答案对我不起作用。它产生了垂直对齐问题……
— TimH-Codidact 2014年
@TimH我知道晚了一点，但是可以通过在容器中添加“ vertical-align：top”来解决垂直对齐问题
— Alfie
抱歉，我的意思是内部div，而不是容器div *
— Alfie
它几乎完美地工作。如果发生溢出，这些项目将移至下一行，但是当它们溢出时，它们将不会居中。
— 帕维尔·吉里·斯特纳德
5

以下解决方案不使用嵌入式块。但是，它需要两个helper 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>
展开摘要

— 萨尔曼A
source
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;
}
— 阿卜杜拉·卡莱姆（Abdulla Kaleem）
source
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）
source
该解决方案是题外话。内部应为float：left以符合OP的要求。
— s15199d 2013年
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

在此示例中，“外部” 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>
展开摘要

— 暗淡
source
这是我一直在寻找的答案，谢谢。您如何计算所需的像素？我不清楚。
— SilverSurfer
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.