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

< 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。只需使用类文本中心

其他回答

我尝试了两种方法,它的工作很好,以中心的div。这两种方法都将对齐div在所有屏幕上。

方法1:使用Push:

<div class = "col-lg-4 col-md-4 col-sm-4 col-xs-4 col-lg-push-4 col-md-push-4 col-sm-push-4 col-xs-push-4" style="border-style:solid;border-width:1px">
    <h2>Grievance form</h2> <!-- To center this text, use style="text-align: center" -->
  </div>

方法2:使用偏移量:

<div class = "col-lg-4 col-md-4 col-sm-4 col-xs-4 col-lg-offset-4 col-md-offest-4 col-sm-offest-4 col-xs-offest-4" style="border-style:solid;border-width:1px">
    <h2>Grievance form</h2> <!--to center this text, use style="text-align: center"-->
</div>

结果:

解释

Bootstrap将指定左边,指定屏幕占用的第一列。如果我们使用offset或push,它会将“this”列移动“that”列。虽然我遇到了一些问题,在响应补偿,推动是了不起的。

最好的方法是定义一个css样式:

.centered-text {
    text-align:center
}    

然后在你需要居中文本的地方,像这样添加它:

<div class="row">
    <div class="span12 centered-text">
        <h1>Bootstrap starter template</h1>
        <p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
    </div>
</div>

或者如果你只想让p标签居中:

<div class="row">
    <div class="span12 centered-text">
        <h1>Bootstrap starter template</h1>
        <p class="centered-text">Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
    </div>
</div>

你使用的内联css越少越好。

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

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

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

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

如果你使用Bootstrap 2.0+

这可以使div居中于页面。

<div class="row">
    <div class="span4 offset4">
        //your content here gets centered of the page
    </div>
</div>

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

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

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

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