cssプロパティtext-alignについての説明

こんにちは tanaka です。

今回は、
cssプロパティ
text-align の説明です。

text-alignは、
2種類の左右配置ができる
プロパティです。

 1:contentに入っている文字や画像
   の左右配置

 2:子要素の
   display:inline
   display:inline-block
   の左右配置


値は4種類
 text-align: left   = 左そろえ
 text-align: right  = 右そろえ
 text-align: center = 中央
 text-align: justify = 最後の行以外、均等割
          (1行だけは、最後の行とみなされる)

それでは、
詳しく説明していきます。

text-align: left;
text-align: right;
text-align: center;
text-align: justify;

<コピーペーストについて>

コードをコピーする際は
灰色で四角く囲まれた所を使用してください。

<i class="fas fa-check-circle"></i>
スポンサーリンク

text-alignの説明

text-alignとは

text-alignは、
2種類の左右配置ができる
プロパティです。

 1:contentに入っている文字や画像
   の左右配置

 2:子要素の
   display:inline
   display:inline-block
   の左右配置

1:contentに入る文字や画像

1:contentに入っている文字や画像の左右配置

文字や画像を左右配置します。

動かしたい文字や画像へ
直接指定します。

画像blog-text-align04
text-align: center;
2:子要素のinline inline-block

2:子要素の
display:inline display:inline-block
の左右配置

子要素にある
display:inline
display:inline-block
の左右配置を指定します。

text-alignは、
親要素へ入れます。

画像blog-text-align08

display:blockは、
text-alignを使って
左右配置することはできません。

display:blockを左右配置するときは、
親要素ではなく直接
margin: 0 auto;
を使います。
(widthの指定も忘れずに)

text-align: center;

width: 300px;
margin: 0 auto;

値は4種類

値は4種類あります。

1:text-align: left   = 左そろえ
2:text-align: right  = 右そろえ
3:text-align: center = 中央
4:text-align: justify = 最後の行以外、均等割
          (1行だけは、最後の行とみなされる)

1:text-align: left(左そろえ)

text-align: leftは、

content内の文字や画像と、
子要素のinline inline-blockを

左へ寄せます。

画像blog-text-align03
画像blog-text-align07

注意)
子要素を左右配置する時は
text-alignを
親要素へ入れる。

text-align: left;
2:text-align: right(右そろえ)

text-align: rightは、

content内の文字や画像と、
子要素のinline inline-blockを

右へ寄せます。

画像blog-text-align05
画像blog-text-align09

注意)
子要素を左右配置する時は
text-alignを
親要素へ入れる。

text-align: right;
3:text-align: center(中央)

text-align: centerは、

content内の文字や画像と、
子要素のinline inline-blockを

中央へ寄せます。

画像blog-text-align04
画像blog-text-align08

注意)
子要素を左右配置する時は
text-alignを
親要素へ入れる。

text-align: center;
4:text-align: justify(最後の行以外、均等割)

text-align: justifyは、

content内の文字を
最後の行以外、均等割します。

例1)
1、2行目は均等割されているが、
3行目(最後の行は均等割されない)

画像blog-text-align01

1行だけは、
最後の行とみなされ均等割になりません。

例2)
1行だけは、
最後の行とみなされ均等割にならない。

画像blog-text-align06

1行で均等割する時は、
text-align-last: justify;
を使ってください。

画像blog-text-align02

注意)
text-align-last: justifyは、

display: inline;
では、均等割になりません。

display: inline-block;
display: block;
を使ってください。

text-align: justify;

text-align-last: justify;

まとめ

text-alignとは

text-alignは、
2種類の左右配置ができる
プロパティ。

 1:contentに入っている文字や画像
   の左右配置

 2:子要素の
   display:inline
   display:inline-block
   の左右配置

値は4種類

値は4種類。

1:text-align: left   = 左そろえ
2:text-align: right  = 右そろえ
3:text-align: center = 中央
4:text-align: justify = 最後の行以外、均等割
          (1行だけは、最後の行とみなされる)

1行均等割は、text-align-last: justify;

1行で均等割をする時は
text-align-last: justify;
を使う。

注意)
text-align-last: justifyは、

display: inline;
では、使えない。

text-align-last: justify;

以上、
text-align
の話でした。

ありがとうございました。

タイトルとURLをコピーしました