text-align

この記事では「text-align」について、基本の意味と使い方を初心者向けにやさしく説明します。

Cascading Style Sheets text-align property.

ブロックコンテナ内の行の揃え位置・均等割付を指定する

　text-alignプロパティは、ブロック要素または表セルボックスの水平方向の配置を指定する際に使用します。

　テキストブロックは、単一または複数行のラインボックスを積み重ねたものです。 下のサンプルでいうと、背景がピンク色の部分がテキストブロック、赤いボーダーで囲んだ部分がラインボックスです。 このサンプルには text-align:end; を指定しています。

　text-alignプロパティは、各ラインボックスをコンテンツ（テキスト内容）が完全に満たしていない場合に、そのコンテンツがインライン軸に沿ってどのように整列するかを設定します。上のサンプルでは、最後の行はテキスト内容がラインボックスを完全には満たしていないため、text-align:end; の指定によってコンテンツがラインボックスの終端に揃えられているのが確認できます。

　text-alignプロパティは、text-align-allプロパティ、および、text-align-lastプロパティの値をまとめて指定するショートハンド（短縮形）です。text-alignプロパティの値が justify-all 以外の場合、text-align-lastプロパティの値は auto に設定されます。

値

start

インラインレベルのコンテンツは、ラインボックスの始端に揃えられる（初期値）

end

インラインレベルのコンテンツは、ラインボックスの終端に揃えられる

left

インラインレベルのコンテンツは、ラインボックスの左端に揃えられる（縦書きモードでは text-orientation プロパティで指定するテキストの方向次第で上端または下端のいずれかに揃えられる）

right

インラインレベルのコンテンツは、ラインボックスの右端に揃えられる（縦書きモードでは text-orientation プロパティで指定するテキストの方向次第で上端または下端のいずれかに揃えられる）

center

インラインレベルのコンテンツは、ラインボックスの中央に配置される

justify

均等割付。最後の行についてはtext-align-lastプロパティの指定がない限り、ラインボックスの始端に揃えられる

justify-all

均等割付。最後の行も強制的に均等割付となる

match-parent

親要素の値を継承する。継承した値が start または end の場合は left または right と解釈される

初期値・適用対象・値の継承

初期値

start

適用対象

ブロックコンテナ

値の継承

する

使用例

p.sample {
	width:200px;
	background-color:#99cc00;
}

<p class="sample" style="text-align:start;">
text-align:start; を指定<br>
How inline content is distributed within a line box?
</p>

<p class="sample" style="text-align:end;">
text-align:end; を指定<br>
How inline content is distributed within a line box?
</p>

<p class="sample" style="text-align:left;">
text-align:left; を指定<br>
How inline content is distributed within a line box?
</p>

<p class="sample" style="text-align:right;">
text-align:right; を指定<br>
How inline content is distributed within a line box?
</p>

<p class="sample" style="text-align:center;">
text-align:center; を指定<br>
How inline content is distributed within a line box?
</p>

<p class="sample" style="text-align:justify;">
text-align:justify; を指定<br>
How inline content is distributed within a line box?
</p>

<p class="sample" style="text-align:justify-all;">
text-align:justify-all; を指定<br>
How inline content is distributed within a line box?
</p>

<p class="sample" style="text-align:match-parent;">
text-align:match-parent; を指定<br>
How inline content is distributed within a line box?
</p>

画像を中央寄せする方法

画像を中央寄せにした例です

<figure>
	<img src="imgs/blue_man.png" alt="青い人の形をした画像">
</figure>

figure {text-align: center;}

　CSSを使って画像を中央寄せにしようとしたときに、<img>要素に対して直接 text-alignプロパティを適用しようとしてもうまくいきません。

　<img>要素は、インライン要素のため text-alignプロパティを適用することができませんので、一旦、ブロック要素の中に入れて、ブロック要素に対して text-alignプロパティを適用させる必要があります。ここの例では、<figure>要素を使いましたが、<figure>要素が適切でない場合は、<div>要素を使うといいかもしれません。

❌ <img>要素に直接 text-alignプロパティを適用した誤った例

<img src="imgs/blue_man.png" alt="青い人の形をした画像">

img {text-align: center;}