【CSS】text-align・marginの中央ぞろえチェックポイントまとめ

こんにちは。Enjoy IT Life管理人の仁科(@nishina555)です。

CSSで要素の中央寄せをする方法にはいくつかありますが、その中でもmargin: 0 autoとtext-align: centerを利用する機会は多いです。

しかし利用方法をきちんと理解していないと、CSSを適用させたのにうまく中央寄せにならないという問題がおきてしまいます。

そこで今回はmargin: 0 autoとtext-align: centerの利用方法について説明をします。
あわせて、うまく中央寄せにならないケースとその解決方法についても紹介します。

『margin: 0 auto』による中央寄せ

margin: 0 autoは上下のマージンを0、左右のマージンをautoにする設定です。左右のマージンをautoにすることで要素が中央寄せになります。

margin: 0 autoで要素を中央寄せにするには以下の条件を満たす必要があります。

widthが画面幅と同じ場合、左右に余白がないため「中央に寄せる」という概念がそもそも存在しません。
ですので、margin: 0 autoでブロック要素を中央寄せにする際は左右の余白が必要です。

うまくいかないケースと解決方法

margin: 0 autoを利用しているのに中央寄せにならないケースとその解決方法について紹介します。

widthが指定されておらずブロック要素の幅が画面と同じ（100%）になっている場合

中央寄せする対象のブロック要素のwidthが画面幅いっぱいの場合、以下のようになります。

See the Pen
margin-1-before by Toshiharu Nishina (@nishina555)
on CodePen.

ブロック要素を中央寄せする場合は適切なwidthを指定する必要があります。

See the Pen
margin-1-after by Toshiharu Nishina (@nishina555)
on CodePen.

中央寄せにする対象がブロック要素自身ではなくブロック要素内にあるコンテンツの場合

pタグ内の文字を中央寄せしたい時によく遭遇するケースです。

pタグはブロック要素なのでmargin 0 autoで中央寄せになりますが、中央寄せの対象はあくまでpタグ自身なので、pタグ内のテキストは中央寄せになりません。

ブロック要素の中にあるコンテンツを中央寄せする場合は「text-aling: center」を利用します。

See the Pen
margin-2-after by Toshiharu Nishina (@nishina555)
on CodePen.

インラインブロックを中央寄せする場合

disply: inleine-blockを適用するとブロック要素をインライン要素のように扱えます。
disply: inleine-blockが適用されたブロック要素はmargin: 0 autoだと中央寄せになりません。

See the Pen
margin-3-before by Toshiharu Nishina (@nishina555)
on CodePen.

「disply: inleine-block」が適用されたブロック要素は「text-align: center」で中央寄せになります。

See the Pen
margin-3-after by Toshiharu Nishina (@nishina555)
on CodePen.

『text-align: center』による中央寄せ

text-alingとはブロック要素内に配置される行の位置に関する設定です。
text-align: centerはブロック要素内のコンテンツを中央に配置するという設定になります。

text-align: centerで要素を中心寄せにするには以下の条件を満たす必要があります。

つまりtext-aling: centerをブロック要素に適用させることで、ブロック内のインライン要素が中央寄せになります。

うまくいかないケースと解決方法

text-align: centerを利用しているのに中央寄せにならないケースとその解決方法について紹介します。

インライン要素に対してtext-alignを指定している場合

text-align: centerをインライン要素に適用させても中央寄せにはなりません。

See the Pen
textalign-1-before by Toshiharu Nishina (@nishina555)
on CodePen.

画像（imgタグ）もインライン要素なので同様の問題が発生します。

See the Pen
textalign-1-2-before by Toshiharu Nishina (@nishina555)
on CodePen.

インライン要素をdivタグやpタグなどのブロック要素で囲み、ブロック要素に対して「text-align: center」を適用させることで中央寄せになります。

See the Pen
textalign-1-after by Toshiharu Nishina (@nishina555)
on CodePen.

See the Pen
textalign-1-2-after by Toshiharu Nishina (@nishina555)
on CodePen.

中央寄せの対象がブロック要素の場合

親のブロック要素にtext-align: centerを指定しても、子ブロック要素は中央寄せになりません。

例えば、テキストを表示するブロック要素を中央寄せにしたい場合、ブロック要素ではなくテキストが中央寄せになってします。

See the Pen
textalign-2-before by Toshiharu Nishina (@nishina555)
on CodePen.

ブロック要素の中央寄せする場合は「margin: 0 auto」を利用します。

See the Pen
textalign-2-after by Toshiharu Nishina (@nishina555)
on CodePen.

まとめ

以上でmargin: 0 autoとtext-align: centerに関する中央寄せの方法について紹介を終わります。

この記事がいいなと思いましたらTwitter(@nishina555)のフォローもよろしくお願いします！