「text-align: center;」はどんな要素に効くのか？主要なdisplayタイプで徹底検証

text-align: center;を使用した場合に、思い通りに中央寄せされないことがあるので、どのタイプの要素であれば中央寄せされるのか実験してみた。

まずはtext-align: center;の説明から

値 : start | end | left | right | center | justify | match-parent | justify-all
初期値 : start
適用対象 : ブロック要素
継承 : あり

text-align は CSS のプロパティで、ブロック要素または表のセルボックス内におけるインラインレベルコンテンツの水平方向の配置を設定します。つまり、 vertical-align と同じように機能しますが、水平方向に機能します。

(引用 : https://developer.mozilla.org/ja/docs/Web/CSS/text-align)

と書かれています。

「ブロック要素または表のセルボックス内におけるインラインレベルコンテンツの水平方向の配置を設定します。」

ここがポイント。

ブロック要素内のインラインレベルコンテンツに作用する。

では、実験していきます。

<div class="parent">
  <p class="child1">おはよう1</p>
  <!-- <br /> -->
  <p class="child2">おはよう2</p>
  <!-- <br /> -->
  <p class="child3">おはよう3</p>
  <!-- <br /> -->
  <p class="child4">おはよう4</p>
  <br />
  <p class="child5">おはよう5</p>
  <br />
  <p class="child6">おはよう6</p>
  <br />
  <p class="child7">おはよう7</p>
</div>

.parent {
  font-size: 50px;
  background: pink;
}

.child1 {
  display: block;
  background: skyblue;
}

.child2 {
  display: flex;
  background: skyblue;
}

.child3 {
  display: grid;
  background: skyblue;
}

.child4 {
  display: inline;
  background: skyblue;
}

.child5 {
  display: inline-block;
  background: skyblue;
}

.child6 {
  display: inline-flex;
  background: skyblue;
}

.child7 {
  display: inline-grid;
  background: skyblue;
}

display: block;

.parent {
  font-size: 50px;
  background: pink;
  text-align: center;
}

.child1 {
  display: block;
  background: skyblue;
}

• ブロック要素は、親要素のtext-align: center;の影響を受けない。
• 文字が中央寄せになっているのは、.parentに当てたtext-align: center;が.child1に継承されているため。
  HTMLで書いたテキストノードの値である文字列はインラインレベルコンテンツと扱われる。そのため、text-align: center;はインラインレベルコンテンツに作用し、文字が中央寄せになる。

display: flex;

.parent {
  font-size: 50px;
  background: pink;
  text-align: center;
}

.child2 {
  display: flex;
  background: skyblue;
}

• flexコンテナはブロックレベルボックスとして振る舞うため、親要素の text-align: center;の影響を受けない。
• text-align: center;は、.parentから.child2に継承されているが、テキストは中央寄せにはなっていない。
  その理由は、
  • flexコンテナ内のテキストノードは匿名ブロックボックスにラップされ、flexアイテムになる。
  • flexの規定値ではアイテムはコンテンツ幅のまま（flex: 0 1 auto）
  • 幅が広がらずコンテンツ幅になっているため、text-align: center;で中央寄せにはならない。
    （※中央寄せしたい場合はjustify-content: center;など flexの整列プロパティを使う。）

display: grid;

.parent {
  font-size: 50px;
  background: pink;
  text-align: center;
}

.child3 {
  display: grid;
  background: skyblue;
}

• gridコンテナはブロックレベルボックスとして振る舞うため、親要素の text-align: center;の影響を受けない。
• text-align: center;は、.parentから.child3に継承されている。flexのときとは違い中央寄せになる。
  その理由は、
  • gridコンテナ内のテキストノードは匿名ブロックボックスにラップされ、gridアイテムになる。
  • gridの規定値はjustify-items: stretch;、align-items: stretch;なので、アイテムはセル幅いっぱいに広がる。
  • テキストノードが保持している文字列はインラインレベルコンテンツなので、text-align: center;が効き、テキストが中央寄せされる。

display: inline;

.parent {
  font-size: 50px;
  background: pink;
  text-align: center;
}

.child4 {
  display: inline;
  background: skyblue;
}

• display: inline;はインラインレベルコンテンツとして扱われるため中央寄せになる。

display: inline-block

.parent {
  font-size: 50px;
  background: pink;
  text-align: center;
}

.child5 {
  display: inline-block;
  background: skyblue;
}

• display: inline-block;は、親要素の中ではインラインレベルコンテンツとして扱われるため中央寄せになる。

display: inline-flex

.parent {
  font-size: 50px;
  background: pink;
  text-align: center;
}

.child6 {
  display: inline-flex;
  background: skyblue;
}

• display: inline-flex;は、親要素の中ではインラインレベルコンテンツとして扱われるため中央寄せになる。
  （inline-flexは外側がinline、内側がflexのため、親要素の text-alignの影響を受ける）

display: inline-grid

.parent {
  font-size: 50px;
  background: pink;
  text-align: center;
}

.child7 {
  display: inline-grid;
  background: skyblue;
}

• display: inline-grid;は、親要素の中ではインラインレベルコンテンツとして扱われるため中央寄せになる。
  （inline-gridは外側がinline、内側がgridのため、親要素の text-alignの影響を受ける）