清除:两个都覆盖边距:0自动

Question

我有一个定位问题需要处理。在容器div中，我有两个div，这两个div都应该水平居中。然而，我对第二个分区的定位有问题。

如果我添加clear:两个div 2都在一个新行上，这是所需要的。但是，如果使用clear:both margin:0 auto；不起作用。我可以使用什么来使div居中？

HTML:

<div class="row-fluid">
    <div class="span6 offset3 text-center header">
        <h1>Title...</h1>
        <p>Text...</p>
    </div>
    <div class="span3 offset4">
        <form>
          ...
        </form>                 
    </div>
</div>

CSS:

.register .span3 {
    width: 270px;
    clear: both;
    margin: 0 auto;
}

输出：

- Without clear:both
 ____________________________________
|                                    |
|              ______       ______   |
|             |      |     |      |  |
|             | div 1|     | div 2|  |
|             |______|     |______|  |
|                                    |
|                                    |
|                                    |
|                                    |
|                                    |
|                                    |

- WITH clear:both
 ____________________________________
|                                    |
|              ______                |
|             |      |               |
|             | div 1|               |
|             |______|               |
|  ______                            |
| |      |                           |
| | div 2|                           |
| |______|                           |
|                                    |
|                                    |
- Desired output
 ____________________________________
|                                    |
|              ______                |
|             |      |               |
|             | div 1|               |
|             |______|               |
|              ______                |
|             |      |               |
|             | div 2|               |
|             |______|               |
|                                    |
|                                    |

Answer 1

当您不浮动时，为什么需要清除clear仅适用于浮动情况。

如果删除clear:beach并仅插入margin:0auto，则两个div都将位于页面的中心，一个在另一个下面。

Answer 2

据我所知，Bootstrap的网格系统使用浮动来定位页面上的元素。

唉，如果某个东西是float: left;，那么margin: 0 auto;就不会把它放在页面的中心。它将向左浮动。div显示为向左偏移的原因是它们应用了offset-3/offset-4类。

要将div元素放在页面中间，我怀疑您需要走出Bootstrap的网格框架，做自己的事情。