如何使用Twitter Bootstrap获取居中内容？

Question

我正在尝试遵循一个非常基本的例子。使用starter page and the grid system时，我希望能做到以下几点：

​

<div class="row">
  <div class="span12">
    <h1>Bootstrap starter template</h1>
    <p>Example text.</p>
  </div>
</div>

​

...would生成居中文本。

但是，它仍然出现在最左边。我做错了什么？

Answer 1

这是用于文本居中的(这就是问题的主题)

有关其他类型的内容，请参阅Flavien's answer。

更新: Bootstrap 2.3.0+ Answer

最初的答案是bootstrap的早期版本。从bootstrap 2.3.0开始，你可以简单地给.text-center.类

原始答案(2.3.0之前版本)

您需要定义两个类中的一个：row或带有text-align: center的span12。请参阅http://jsfiddle.net/xKSUH/或http://jsfiddle.net/xKSUH/1/

Answer 2

注意:这是removed in Bootstrap 3。

在Bootstrap3之前，您可以像这样使用CSS类pagination-centered：

<div class="span12 pagination-centered">
    Centered content.
</div>

类pagination-centered已经在bootstrap.css (或bootstrap.min.css)中，并且只有一条规则：

.pagination-centered{text-align:center;}

使用Bootstrap 2.3.0。只需使用text-center类

Answer 3

我猜这里的大多数人实际上都在寻找使整个div居中的方法，而不仅仅是文本内容(这是微不足道的…)。。

在HTML中居中的第二种方法(而不是使用text-align: center )是使用一个具有固定宽度和自动边距(左和右)的元素。对于Bootstrap，定义自动边距的样式是“容器”类。

<div class="container">
    <div class="span12">
        "Centered stuff there"
    </div>
</div>

看一下这里的小提琴：http://jsfiddle.net/D2RLR/7788/