0

我有一个定位问题需要处理。在容器 div 中，我有两个 div，它们都应该在彼此下方水平居中。但是，我遇到了第二个 div 的定位问题。

如果我添加 clear:both 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|               |
|             |______|               |
|                                    |
|                                    |
4

2 回答 2

2

为什么不漂浮时需要清除？clear仅适用于浮动情况。

如果您删除clear:both并仅插入margin:0 auto，则两个 div 都将在页面上居中，一个在另一个下方，如您所愿。

于 2013-08-26T14:12:55.547 回答
1

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

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

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

于 2013-08-27T11:25:27.170 回答