水平方向の配置を指定するtext-alignについて解説

1.text-align とは

text-align とは、文字などのブロック要素に対して水平方向の配置を指定するプロパティです。

2.text-align の指定方法

text-align の指定方法は主に3つあります。

3.text-align を使って左寄せにする

それでは text-align を使って左寄せにするときの指定方法と表示を見ていきましょう。

<p class="text-left">テキストを左寄せにする</p>

.text-left {
  text-align: left;
}

上記のように text-align: left; を指定するとテキストが左寄せになります。

4.text-align を使って右寄せにする

次に text-align を使って右寄せにするときの指定方法と表示を見ていきましょう。

<p class="text-right">テキストを右寄せにする</p>

.text-right {
  text-align: right;
}

上記のように text-align: right; を指定するとテキストが右寄せになります。

5.text-align を使って中央寄せにする

text-align を使って中央寄せにするときの指定方法と表示を見ていきましょう。

<p class="text-center">テキストを中央寄せにする</p>

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

上記のように text-align: center; を指定するとテキストが中央寄せになります。

6.今回のまとめ

text-align とは、文字などのブロック要素に対して水平方向の配置を指定するプロパティです。

指定方法は主に left(左寄せ)、right(右寄せ)、center(中央寄せ) の3つになります。

最後までお読みいただきありがとうございます。