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

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

其他回答

任何文本对齐实用程序类都可以做到这一点。Bootstrap使用.text-center类来居中文本已经有很长一段时间了。

.text-center { text-align: center !important; }

或者您可以创建自己的实用程序。这些年来我看到的一些变化:

.u-text-center { text-align: center !important; }
.ta-center { text-align: center !important; }
.ta\:c { text-align: center !important; }

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

这可以使div居中于页面。

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

最好的方法是定义一个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越少越好。

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

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