如何使用Bootstrap2使div居中？

Question

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>

修改了span和偏移量的数字...

但我无法使一个简单的方框完美地居中于页面 :(

我只想要一个占6列宽度的方框居中...

---

编辑：

用以下方式实现：

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

但是这个盒子太宽了，有没有办法可以使用span7？

span7 offset2 在左侧提供额外的填充，span7 offset3 在右侧提供额外的填充...

- Alex

---

你想要在页面上水平居中一个盒子吗？因为 container 类已经实现了这个功能，我想你可能是想要将一个较小的盒子居中。或者你想要在页面上同时水平和垂直居中一个盒子吗？ - Andres Ilich

你说的那个"box thing"在开发者界里被称为"div"。 - pythonian29033

你使用的是哪个版本的Bootstrap？这应该在标题中反映出来，因为查找此内容的人可能会看到过时的代码。 - JGallardo

Answer 1

Bootstrap 的 Span 元素默认是向左浮动的。要使它们居中，只需覆盖这种行为即可。我通过将以下内容添加到我的样式表来实现:

Bootstrap 的 span 元素默认向左浮动。要让它们居中，只需要覆盖这个行为。我通过将以下代码添加到我的样式表中实现：

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

如果您已经定义了这个类，只需要将其添加到span中，您就可以开始了。

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

需要注意的是，这个自定义中心类必须在引入 Bootstrap CSS 之后定义。您可以使用 !important，但这并不推荐。

- Zuhaib Ali

---

是的！谢谢，Zuhaib！非常完美。这个回答应该被投票为这个问题的正确答案。 - BigSauce

@ZuhaibAli 添加 float: none; 解决了我的问题。 - SIFE

我正在使用Rails，所以我想指出在application.css中，要在*= require_self和*= require_tree之前添加*= require bootstrap.min。 - user2109908

这对我没有起作用，但添加 display: table 似乎解决了问题。 - Peter Berg

好的回答！从现在开始用这个。 - serv-bot 22

Answer 2

除了通过减小大小来缩小

自身的大小，例如... class="span6 offset3"、class="span4 offset4"等，只需在

上添加简单的style="text-align: center"即可达到您需要的效果。

如果使用任何设置的offset和span7，则无法将span居中于页面上（因为总跨度=12）。

- csturtz

---

请参考Zuhaib Ali的答案。在<div>中，text-align: center无法使元素居中。offset*类并未真正实现组件居中，它只是营造了这种假象。如果你调整窗口大小，你会发现组件并没有保持居中状态。而使用Zuhaib Ali的方法，则可使组件保持居中状态。 - BigSauce

不要添加内联样式（style="text-align:center"），而是添加类“center-block”，在居中的 div 中获取居中的内容。 - Shawn Taylor

col-md-4或col-lg-4是否等于margin: 0 auto？ - jruzafa

Answer 3

Bootstrap3提供了.center-block类，您可以使用它来使元素居中。该类定义如下：

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

文档在此。

- Casey

Answer 4

如果你想要完全使用Bootstrap（而不是自动左/右的方式），你需要一个可以适应12列的模式，例如2个空白，8个内容，2个空白。这就是这个设置将完成的事情。 它仅覆盖 -md- 变体，我倾向于通过添加 col-xs-12 来使其在小型设备上全幅显示。

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

- Craig

---

这是在Bootstrap中居中div的有效方法吗？ - Gavindra Kalikapersaud

div 的内容不是居中的，但 div 本身是居中的。 - Craig

Answer 5

看起来你只想要将一个容器居中对齐。 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) */
}

如果您嵌套在Bootstrap .container div中，那么这应该可以正常工作。

- cstrat

Answer 6

添加centercontents类

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

- mrpix

Answer 7

@ZuhaibAli 的代码对我有点用处，但我稍微改了一下：

我在 CSS 中创建了一个新类。

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

然后 div 变成

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

我为div本身的宽度添加了col-md-6，这意味着在这种情况下div的大小是一半，Bootstrap中有1-12个col md。

- jakson

Answer 8

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

使用.center-block

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

- core114

Answer 9

将 div 包裹在一个 class 为 row 的父 div 中，然后给该 div 添加样式 margin:0 auto;。

<div class="row">
  <div style="margin: 0 auto;">center</div>
</div>

- Mahmoud Farahat