如何使用Bootstrap2中心div？

http://twitter.github.com/bootstrap/scaffolding.html

我尝试像所有的组合：

<div class="row"> <div class="span7 offset5"> box </div> </div>

要么

 <div class="container"> <div class="row"> <div class="span7 offset5"> box </div> </div> </div>

更改跨度和偏移号码…

但我不能得到一个简单的框完全集中在一个页面:(

我只想要一个6列宽的盒子

编辑：

做到了

 <div class="container"> <div class="row" id="login-container"> <div class="span8 offset2"> box </div> </div> </div>

但是盒子太宽了，有什么办法可以用span7做吗？

span7 offset2给左边的额外填充span7 offset3向右边的额外填充…

除了缩小div本身的大小，你想要的，通过减less跨度大小像这样… class="span6 offset3" ， class="span4 offset4" ，等等…像简单的东西style="text-align: center"在div上可能会有你要找的效果

你不能使用span7与任何设置的偏移量，并获得页面中心的跨度（因为总跨度= 12）

Bootstrap的跨度漂浮在左侧。所有需要居中的是覆盖这个行为。我通过将这添加到我的样式表来做到这一点：

 .center { float: none; margin-left: auto; margin-right: auto; }

如果你已经定义了这个类，只需将它添加到跨度，你就可以走了。

 <div class="span7 center"> box </div>

请注意，这个自定义中心类必须在引导CSS 后定义。你可以使用!important但不推荐。

Bootstrap3具有可以使用的.center-block类。它被定义为

 .center-block { display: block; margin-left: auto; margin-right: auto; }

文档在这里。

如果你想完全引导（而不是自动的左/右方式），你需要一个模式，将适合12列，如2空白，8内容，2空白。这就是这个设置将会做的。它只覆盖-md-变体，我倾向于通过添加col-xs-12将其捕捉到全尺寸

 <div class="container"> <div class="col-md-8 col-md-offset-2"> box </div> </div>

听起来像你只是想中心alignment一个容器。 bootstrap框架可能会让这个例子过于复杂，你可能只是有一个独立的div与自己的样式，如：

 <div class="login-container"> <!-- Your Login Form --> </div>

和风格：

 .login-container { margin: 0 auto; width: 400px; /* Whatever exact width you are looking for (not bound by preset bootstrap widths) */ }

这应该工作正常，如果你嵌套在引导.container div的某处。

添加类中心内容

 /** Center the contents of the element **/ .centercontents { text-align: center !important; }

@ZuhaibAli代码types的工作对我来说，但我改变了一点点：

我在CSS中创build了一个新类

 .center { float: none; margin-left: auto; margin-right: auto; }

那么div就成为了

 <div class="center col-md-6"></div>

我为div的宽度添加了col-md-6，在这种情况下，这意味着div是size的一半，bootstrap中有1 -12 col md。

使用.center-block

 .center-block { display: block; margin-left: auto; margin-right: auto; }