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

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

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

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

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

当前回答

如果你使用Bootstrap 2.0+

这可以使div居中于页面。

<div class="row">
    <div class="span4 offset4">
        //your content here gets centered of the page
    </div>
</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/

注意:这在引导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 class="center-block" style="width:200px;background-color:#ccc;">...</div>

类center-block所做的就是告诉元素的边距为0 auto, auto是左/右边距。但是，除非类text-center或css text-align: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>

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

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

推荐文章