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

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

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

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


当前回答

注意:这在引导3中被移除。


在bootstrap 3之前,你可以像这样以分页为中心使用CSS类:

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

以类分页为中心已经在bootstrap.css(或bootstrap.min.css)中,并且只有一个规则:

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

使用Bootstrap 2.3.0。只需使用类文本中心

其他回答

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或其他类,我想。

这是关于文本居中的(这就是问题的内容)

关于其他类型的内容,请参阅Flavien的回答。

更新:引导2.3.0+答案

最初的答案是bootstrap的早期版本。从引导2.3.0开始,你可以简单地给div命名为.text-center类。


原始答案(2.3.0之前)

您需要用text-align: center定义这两个类中的一个,row或span12。见http://jsfiddle.net/xKSUH/或http://jsfiddle.net/xKSUH/1/

如果你使用Bootstrap 3,它也有内置的CSS类命名为.text-center。这就是你想要的。

<div class="text-left">
    left
</div>

<div class="text-center">
    center
</div>

<div class="text-right">
    right
</div>

请参阅jsfiddle中的示例。http://jsfiddle.net/ucheng/Q4Fue/

您可以使用以下类型中的任何一种

使用Bootstrap现有的类文本中心。 添加自定义样式,style = "text-align:center"。 使用列偏移量: 例如:<div class="col-md-offset-6 col-md-12"></div>