Question

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

我不介意使用wrapper-div。

文本对齐：居中和显示：内联块不适用于我的代码。

enter image description here

Answer 1

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

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

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

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

Answer 4

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

您可以使用内联块元素包装浮动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％，因此一切都偏离中心。

Answer 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

Answer 6

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

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

Answer 8

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

然后添加overflow：auto以使容器div包围3个div，然后将容器div设置在中心，边距为：0 auto。

如何居中浮动div？

8 个答案: