如何使用Bootstrap 2将div居中？

Question

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

我尝试了所有组合： 通用标签

或 通用标签

已更改跨度和偏移量数字...

但是我无法在页面上完美地找到一个简单的盒子：（

我只想要一个6栏宽的盒子居中...

---

编辑：

使用 通用标签

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

span7 offset2在左侧增加了额外的填充，span7 offset3在右侧增加了额外的填充...

Answer 1

除了通过减小跨度大小将div本身缩小到所需的大小外，... class="span6 offset3"，class="span4 offset4"等...在div上像style="text-align: center"这样简单的内容可能会满足您的需求

您不能将span7与任何设置的偏移量一起使用，而不能使span居中显示在页面上（因为总spans= 12）

Answer 2

引导程序的跨度浮动到左侧。使它们居中的所有方法都将覆盖此行为。为此，我将其添加到样式表中： 通用标签

如果您定义了此类，只需将其添加到范围中就可以了。 通用标签

请注意，此自定义中心类必须在引导CSS之后 定义。您可以使用!important，但不建议这样做。

Answer 3

Bootstrap3具有您可以使用的.center-block类。定义为 通用标签

文档此处。

Answer 4

如果您想采用完全自举（而不是自动左右移动），则需要一种适合12列的模式，例如2个空白，8个内容，2个空白。这就是此设置将要执行的操作。 它仅涵盖 -md-变体，我倾向于通过添加col-xs-12 将其缩放为小尺寸 通用标签

Answer 5

像您刚想将单个容器居中对齐的声音。 引导框架可能会使一个示例复杂化，您可能只有一个具有自己样式的独立div，例如： 通用标签

和样式： 通用标签

如果您嵌套在引导程序基因标签代码div中的某处，那应该会很好。

Answer 6

添加课程中心内容 通用标签

Answer 7

@ZuhaibAli代码对我来说有点工作，但我做了一点修改：

我在CSS中创建了一个新类 通用标签

然后div变为 通用标签

我为div本身的宽度添加了col-md-6，这意味着这种情况下div的大小是一半，引导程序中包含1 -12 col md。

Answer 8

遵循此指南 https://getbootstrap.com/docs/3.3/css/

使用.center-block 通用标签