目的
Bootstrapを用いてCSSで設定する所のtext-aline: center;と同じ表示にする方法をまとめる
前提条件
- Bootstrapの設定が読み込まれるようになっている
- Bootstrapのテンプレートを使用してHTMLファイルをコーディングしている。
※Bootstrapの設定を反映させるためのテンプレートはこちらのスターターテンプレート内のコードをコピーする。
押さはえるポイント
- Bootstrapで既に定義された内容を設定したい時はHTMLファイルのクラス名に定義名を記載する。
- テキストを要素の中央に配置するにはクラス名にtext-centerを追加する。
- 右寄り、左寄りの設定も可能
書き方の例
- h1要素のテキストを中央に配置する。
- 下記にHTMLファイルの内容を記載する。
<h1 class="text-center">おはようございます。</h1>
- h1要素のテキストを左寄りに配置する。
- 下記にHTMLファイルの内容を記載する。
<h1 class="text-left">おはようございます。</h1>
- h1要素のテキストを右寄りに配置する。
- 下記にHTMLファイルの内容を記載する。
<h1 class="text-right">おはようございます。</h1>