我想用一个非常基本的例子。使用入门页面和网格系统,我希望如下:

< div class = "行" > < div class = " span12”> <h1>引导启动器模板</h1> < / p > < p >示例文本。 < / div > < / div >

...会产生居中的文本。

然而,它仍然出现在最左边。我做错了什么?


当前回答

只需为你想要的div或标签使用一个类,text-center。我认为它可能会很好。它是一个用于文本对齐中心的引导类。

下面是一些文本对齐引导类:

text-left, text-right, text-justify, etc.
<div class="row">
 <div class="col-md-12 text-center">
  <h1>Bootstrap starter template</h1>
  <p>Example text.</p>
 </div>
</div>

其他回答

Bootstrap 3.1.1有一个.center-block类用于对div进行居中。见:http://getbootstrap.com/css/ helper-classes-center。

设置要显示的元素:通过页边距显示块和居中。可作为mixin和类使用。

<div class="center-block">...</div>

或者,正如其他人已经说过的,使用.text-center类将文本居中。

类.show-grid在链接中的示例中应用居中对齐的文本。

你总是可以添加style="text-align:center"到你的行div或其他类,我想。

在我这边,我定义了新的CSS样式,易于使用和记忆:

.center { text-align: center;}
.left { text-align: left;}
.right { text-align: right;}
.justify { text-align: justify;}
.fleft { float: left;} /*-> similar to .pull-left already existing in bootstrap*/
.fright { float: right;}  /*-> similar to .pull-right already existing in bootstrap*/
.vab { vertical-align: bottom;}
.bold { font-weight: bold;}
.italic { font-style: italic;}

这是个好主意吗? 有什么好的做法吗?

中心块也是一个选项没有提到以上的答案

    <div class="center-block" style="width:200px;background-color:#ccc;">...</div>

类center-block所做的就是告诉元素的边距为0 auto, auto是左/右边距。但是,除非类text-center或css text-align:center;在父元素上设置时,元素不知道从哪个点进行自动计算,因此它不会像预期的那样居中。

所以文本中心是一个更好的选择。

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

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

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

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