你如何得到中心内容使用Twitter引导?

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

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

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

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

当前回答

从2013年2月开始，在某些情况下，我在“span”div中添加了一个“centric”类:

<div class="container">
  <div class="row">
    <div class="span9 centred">
      This div will be centred.
    </div>
  </div>
</div>

和CSS:

[class*="span"].centred {
  margin-left: auto;
  margin-right: auto;
  float: none;
}

这是因为span* div被浮动到左边，而“自动边缘”居中技术仅在div没有浮动的情况下才有效。

演示(在JSFiddle上):http://jsfiddle.net/5RpSh/8/embedded/result/

JSFiddle: http://jsfiddle.net/5RpSh/8/

其他回答

2018年更新:

在Bootstrap 4.1.3中，内容可以使用mx-auto类居中。

<div class="mx-auto">
  Centered element
</div>

参考:https://getbootstrap.com/docs/4.1/utilities/spacing/ #水平居中

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

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

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

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

Bootstrap 2.3有一个文本中心类。

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>

注意:这在引导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居中的方法，而不仅仅是文本内容(这是微不足道的…)

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

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

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

推荐文章