私は非常に基本的な例に従おうとしています。 スターターページとグリッドシステム]1を使って、次のようなことを期待していました。
<div class="row">
<div class="span12">
<h1>Bootstrap starter template</h1>
<p>Example text.</p>
</div>
</div>
...では、センタリングされたテキストが表示されます。
しかし、やはり左端に表示されてしまいます。何が間違っているのでしょうか?
他のタイプのコンテンツについては、Flavien's answerを参照してください。
Update: Bootstrap 2.3.0+の回答。
オリジナルの回答は、初期のバージョンのbootstrapに対するものでした。bootstrap 2.3.0では、divにクラス.text-center
を与えるだけでよいでしょう。
**オリジナルの回答(2.3.0以前)
2つのクラス、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の使用は少ない方が良いでしょう。