HTML & CSS

最終更新日:
公開日:

リファレンス

CSS

テキスト アライン

text-alignプロパティ

文章を揃える位置を指定するプロパティです。

  • 初期値

    start

  • 継承

    継承あり

  • 適用できる要素

    ブロックコンテナ要素

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

  • 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;
}

表示例:

Cascading Style Sheet – start

Cascading Style Sheet – end

Cascading Style Sheet – left

Cascading Style Sheet – right

Cascading Style Sheet – center

Cascading Style Sheet – justify

Cascading Style Sheet – justify-all

Cascading Style Sheet – match-parent

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

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

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