如何使浮动div居中？答案

【问题标题】：How to center floating divs?如何使浮动div居中？
【发布时间】：2013-03-22 18:39:21
【问题描述】：

我想将下面模型中出现的三个 div 居中（都有“float:left”）。这可能吗？

我不介意包装 div。

Text-align:center 和 display:inline-block 不适用于我的代码。

【问题讨论】：

【解决方案1】：

如果你想让它们居中，你不能浮动它们。更好的选择是将它们全部设为display: inline-block，这样您仍然可以将它们样式化为块元素，并且它们仍然会注意父包装器上的text-align: center。对于您提供的有限示例，这似乎是一个很好的解决方案。

为了考虑浏览器兼容性，您需要将它们更改为 <span> 而不是 <div>，然后再将 display: inline-block 添加到它们。这将在所有 IE7 及更高版本以及所有其他现代浏览器中得到支持。不支持 IE6，但it's only widely used in China anymore。

【讨论】：

不要忘记确保元素真的是'float: none;'。和 text-align: center;应该添加到父容器中（例如 div#wrapper）。

【解决方案2】：

div#wrapper {
    width:960px;
    margin: 0 auto;
}

http://jsfiddle.net/WyxHQ/1/

编辑：

根据建议将完整代码从小提琴移到回答

<div id="outer-wrapper">
    <div id="wrapper">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
    </div>
</div>

HTML

div#outer-wrapper{
border:2px solid black;
    padding:10px;
    width:100%;
}

CSS

div#wrapper{
    width:99px;
    margin:0 auto;
} 

div {
    width:33px;
    height:20px;
}

div.one{
    background:red;
    float:left;
}

div.two{
    background:blue;
        float:left;
}

div.three{
    background:green;
        float:left;
}

【讨论】：

这将使包装器在屏幕上居中，我认为他想将浮动元素居中 inside 包装器。
然后只创建另一个 wrapper，原理是一样的（见fiddle）
+1，但您应该将相关代码从 JSFiddle 移至您的答案。这仅在您知道元素的宽度时才有效 - 询问者会这样做。否则我会参考@animuson 的回答。
我不认为添加额外的元素只是用于样式是一个非常好的做法。
@animuson 很高兴听到这个消息，也许您可以将我们都链接到您的“最佳实践”页面，我们都可以向您学习。我不认为这是忽略旧浏览器的最佳做法，但我不会在你的回答下抱怨它

【解决方案3】：

您也可以使用列表并获得相同的结果：

CSS：

.wrap
  {
    border:2px solid black;
    width:100%;
  }

ul
  {
    width:99px;
    margin:0 auto;
    height: 20px;    
  } 

ul li 
  {
    width:33px;
    height:20px;
    float: left;
    margin: 0px;
    padding: 0px;
  }

ul li.red 
  {
     background-color: red;   
  }

ul li.blue 
  {
     background-color: blue;   
  }

ul li.green 
  {
     background-color: green;   
  }

HTML：

    <div class="wrap">
      <ul>
        <li class="red"> </li>
        <li class="blue"></li>
        <li class="green"></li>
      </ul>
    </div>

【讨论】：

【解决方案4】：

试试这个：http://jsfiddle.net/nvpXx/3/

你可以用一个 inline-block 元素包裹你的浮动 div 并将它放在它的父元素中。

HTML

<div id="main">
    <div class="wrap">
        <div class="item">thing 1</div>
        <div class="item">thing 2</div>
        <div class="item">thing 3</div>
        <div class="clear"></div>
    </div>
</div>

CSS

#main {width: 600px; background-color: #eee; margin: 0 auto; padding: 10px; text-align: center;}
#main .item {float: left; border: 1px solid #ccc; margin: 5px; }
.clear {clear: both;}
.wrap { display: inline-block; padding: 5px; bordeR: 1px solid black; margin: auto;}

潜在的陷阱

如果您有太多浮动项目以使其换行到第二行，则此方法效果不佳。此时，div.wrap 扩展到其容器的 100%，因此一切都偏离了中心。

【讨论】：

【解决方案5】：

试试这个，保持简单：

<ul>
<li> one </li>
<li> two </li>
<li> three </li>
</ul>

<style>
ul{margin:0 auto;max-width:500px}
ul li{float:left;margin:0 auto 1em;text-align:center;width:33%}
</style>

这将使其响应，尽管它在某些点上中断，它有助于为最大宽度创建媒体查询：

<style>
@media screen and (max-width:520px){ ul li{float:none} }
</style>

Fiddle here

【讨论】：

【解决方案6】：

顾名思义，浮动完全独立于它们的容器。因此，您不能根据容器将它们居中，因为它们不会知道容器。

【讨论】：

完全独立？不，他们不是。
不完全，就其本身而言，只是在问题的上下文中，就像在它们的相对定位中一样。

【解决方案7】：

希望这会有所帮助：

<body>
    <div style="width:306px; border:#333333 1px solid; margin-left:auto; margin-right:auto">   
        <div style="width:100px; border:#333333 1px solid; float:left;">div A</div>
        <div style="width:100px; border:#333333 1px solid; float:left;">div B</div>
        <div style="width:100px; border:#333333 1px solid; float:left;">div C</div>
    </div>
</body>

【讨论】：

【解决方案8】：

我要做的是为它们添加一个容器 div。

然后添加overflow:auto，让容器div环绕3个div，然后设置容器div居中，margin:0 auto。

【讨论】：