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

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

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

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


当前回答

如果你使用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/

其他回答

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

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

在保持响应性(移动兼容性)的同时,我更喜欢将信息块居中的方法是在您希望居中的内容之前和之后放置两个空span1 div。

<div class="row-fluid">

    <div class="span1">
    </div>

        <div class="span10">
          <div class="hero-unit">
            <h1>Reading Resources</h1>
            <p>Read here...</p>
          </div>
        </div><!--/span-->

    <div class="span1">
    </div>

</div><!--/row-->

如果你使用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/

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

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

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

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

<div class="container">
  <div class="col-md-12 centered">
    <div class="row">
      <div class="col-md-1"></div>
       <div class="col-md-10">
           label
       </div>
      <div class="col-md-1"></div>
    </div>
  </div>
</div>

不要主要使用容器流体。