【CSS】text-alignが効かない時のチェック項目

コーディング

今回は、text-alignが効かない時の原因と考えられることを解説していきます！

text-alignとは

text-alignプロパティでは、ブロック要素または表セルボックスの水平方向の配置を決めることができます。
つまり、ブロック要素（表セルボックス）の中身をどのように配置したいのかを指定できるプロパティです。
参考：https://developer.mozilla.org/ja/docs/Web/CSS/text-align

以下は、上から順に
・left（初期値）
・center
・right
を指定している例です。

See the Pen text-align by spiqa design (@spiqa_design) on CodePen.

本来はこのように表示されるのですが、指定が間違っているとtext-alignが効かない場合があります。このtext-alignが効かない時の原因と考えられる事項をご説明いたします。

原因1：インライン要素に指定している

要素は、大きくブロック要素（ブロックレベル要素）とインライン要素の２つに分類できます。
ブロック要素とインライン要素については、以下の記事で解説していますので、参考にしてください！

【CSS】text-alignが効かない時のチェック項目

今回指定するtext-alignは、最初にご説明したとおり、ブロック要素または表セルボックスに指定することができるものです。

以下の例では、どちらにもtext-align:rightを指定しています。
1つ目の例は、インライン要素であるspanに指定しているので、右に寄っていません。
2つ目の例は、display:blockを指定してブロック要素にしているので、text-alignが効いて右に寄っています。

See the Pen text-align by spiqa design (@spiqa_design) on CodePen.

text-alignを指定しているにもかかわらず、うまくいかないという時は、インライン要素に指定しようとしていないか確認してみてください。

原因2：画像を寄せようとしている

これまでご説明したとおりtext-alignはブロック要素に指定する必要があります。

今回、画像を真ん中寄せにしてみたいと思います。
imgはインライン要素なので、上記の例と同じように、ブロック要素にします（display:blockを指定する）と思います。

See the Pen text-align by spiqa design (@spiqa_design) on CodePen.

imgをブロック要素にしているにもかかわらず、画像が真ん中寄せになりません。これは、text-alignがブロック要素（表セルボックス）の中身をどのように配置するかを決めるものだからです。

検証ツールで確認すると分かりますが、img要素いっぱいに画像が表示されている状況になっています。
そのため、img要素の中身をどのように配置するかの指定はできないのです。

解決方法1　ブロック要素で囲む

imgをdivなど他のブロック要素で囲んで、その囲んだブロック要素にtext-alignを指定する方法があります。imgが親要素の指定に従い配置されることになります。

See the Pen text-align by spiqa design (@spiqa_design) on CodePen.

解決方法2　ブロック要素にして、marginで調整する

こちらはtext-alignを使用した方法ではないのですが、実際によく使われる方法でとても便利なのでご紹介します。

まず、imgにdisplay:blockを指定してブロック要素にします。このままだと初期値通りに左寄せになっています。

真ん中寄せにしたい場合は、margin : 0 auto（別途上下のmarginを指定したい時は指定してください。必要なのは右と左の「auto」の部分です）を、右寄せにしたい場合は、margin-left: autoで実現できます。

See the Pen mdOBbLK by spiqa design (@spiqa_design) on CodePen.

marginによる配置を行う場合には、必ず要素がブロック要素である必要がありますので、きちんと確認してくださいね！

両端揃え(justify)の注意点

text-alignには、両端揃えの指定もできます。

両端揃えとは

文章が入る範囲がわかりやすいように、背景をピンク色にしています。

See the Pen zYoEOJo by spiqa design (@spiqa_design) on CodePen.

何も指定していない場合、左から文字が並んでいき、入らなくなったところで折り返されています。そのため、右側がガタガタになってしまっています。
ここにtext-align: justifyを指定することで、両端揃えになります。

文章が1行の場合

文章が1行しかない場合を見てみたいと思います。

See the Pen xxRXKQd by spiqa design (@spiqa_design) on CodePen.

text-align: rightは問題なく効いているのに対し、text-align: justifyは左に寄ったままです。

この原因を説明するために、先程の例をもう一度見ていただきたいのですが、これは、最終行については両端揃えになっていません。

See the Pen zYoEOJo by spiqa design (@spiqa_design) on CodePen.

text-align: justifyは、テキストの場合、最終行を除いて、両端揃えになるのです。

最終行の配置方法を指定するにはtext-align-lastを使います。text-align-last: justifyを指定することで、1行でも（最終行も）両端揃えにすることができます。

ただし、こちらのサイトを見ていただくとわかるように、Safariではまだサポートされておりません。
h ttps://developer.mozilla.org/ja/docs/Web/CSS/text-align-last
そのため、1行の文章のレイアウトには、letter-spacingやpaddingなどを用いて調整するのが良いかもしれません。