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

小编典典

all

我正在尝试遵循一个非常基本的示例。使用起始页和网格系统，我希望如下：

<div class="row">

  <div class="span12">

    <h1>Bootstrap starter template</h1>

    <p>Example text.</p>

  </div>

</div>

…会产生居中的文本。

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

阅读 106

2022-03-07

共1个答案

小编典典

对于其他类型的内容，请参阅回答:

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

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

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

更新：Bootstrap 2.3.0+ 答案

最初的答案是针对早期版本的引导程序。从 bootstrap 2.3.0 开始， 您可以简单地为 div 赋予 class.text- center。

原始答案（2.3.0 之前）

您需要定义两个类之一，row或者span12使用text-align: center.
请参阅 http://jsfiddle.net/xKSUH/或 http://jsfiddle.net/xKSUH/1/

2022-03-07