text-alignプロパティ

値

次のような値を設定することができます。

• start – 行の開始位置に揃えます。左から右へのテキストであれば「left」、逆であれば「right」となります。初期値です。
• end – 行の終了位置に揃えます。「start」とは左右反対の位置です。
• left – 左揃え
• right – 右揃え
• center – 中央揃え
• justify – インラインコンテンツの左右の端が、ブロックコンテンツの両端に揃うように表示します。ただし、最終行は除きます。
• justify-all – 「justify」と同様ですが、こちらは最終行も両端に揃えます。
• match-parent – 親要素のテキストの流れから、「left」か「right」のどちらかを自動的に設定します。

パターン1

次の例では、上記の値をそれぞれ指定しています。「justify」、「justify-all」は対応しているブラウザのみ両端揃えとなり、未対応ブラウザでは「left」へ置き換えられます。

CSSコード例

.sample_css1 .text1 {
	text-align: start;
}
.sample_css1 .text2 {
	text-align: end;
}
.sample_css1 .text3 {
	text-align: left;
}
.sample_css1 .text4 {
	text-align: right;
}
.sample_css1 .text5 {
	text-align: center;
}
.sample_css1 .text6 {
	text-align: justify;
}
.sample_css1 .text7 {
	text-align: justify-all;
}
.sample_css1 .text8 {
	text-align: match-parent;
}

表示例：

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。