text-alignを使った文字位置の調整と使用例【CSS】

HTMLやCSSを学び始めたばかりの頃に、text-alignというCSSをよく目にするかと思います。
このtext-alignについて、分かりやすく解説していきます。

text-alignプロパティとは

このtext-alignプロパティは、画像やテキストの水平方向の表示位置を指定するプロパティとなります。
左や右、中央や両端揃えにする事が可能です。

利用できる値

text-alignプロパティに指定できる値で実際使用するのはleft(左)、right(右)、center(中央)がほとんどですが、この他にもいくつかありますので紹介いたします。

left

左寄せになります。

right

右寄せになります。

center

中央寄せになります。

justify

均等割(両端揃え)になります。テキストは最終行を除いて均等割(両端揃え)となります。

justify-all

基本的にはjustifyと同じとなりますが、最終行も均等割(両端揃え)になります。

start

テキストの開始方向になります。
日本語ではデフォルトでは左寄せ、右から左に各言語ではrightと同じとなります。

end

テキストの終了方向になります。
日本語ではデフォルトでは右寄せ、右から左に各言語ではleftと同じとなります。

match-parent

親要素の値と同じになります。

使用例

以下に使用例を掲載しますが、ここではよく使用するleft、right、centerと使う機会のあるjustifyをテキストで掲載いたします。

text-align: left;

p {
    text-align: left;
}

text-align: right;

p {
    text-align: right;
}

text-align: center;

p {
    text-align: center;
}

text-align: justify;

p {
    text-align: justify;
}

均等割(両端揃え)のjustifyですが、厳密に均等割(両端揃え)にするには他にもいくつかcssを設定する必要がありますので、後日改めて紹介いたします。

さいごに

いかがでしたでしょうか。
このtext-alignプロパティはよく使用しますので、しっかり理解し使えるようになってください。