我想遵循一个非常基本的例子。 使用起始页和网格系统,我希望能做到以下几点。
<div class="row">
<div class="span12">
<h1>Bootstrap starter template</h1>
<p>Example text.</p>
</div>
</div>
...将产生居中的文本。
然而,它仍然出现在最左边。我做错了什么?
对于其他类型的内容,见Flavien's answer。
更新:Bootstrap 2.3.0+答案
原来的答案是针对bootstrap的早期版本的。从bootstrap 2.3.0开始,你可以简单地给div设置.text-center
的类。
原始答案(2.3.0之前)
你需要定义两个类中的一个,row
或span12
,并加上text-align: center
。见
最好的方法是定义一个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越少越好。