😽

pタグなどのテキストを縦方向に中央に並べる方法

3 min read 1

この記事ではpタグなどのテキストを縦方向に中央に寄せる方法について解説します。

テキストが1行の場合

pタグで出力したいテキストが1行の場合、line-heightを使って中央寄せすることが可能です。
以下のコードでは「親要素の高さ(height)」と「テキストの1行分の高さ(line-height)」を合わせることで縦方向に中央寄せしています。

html

<div>
    <p>
        中央寄せテキスト
    </p>
</div>

scss

$div-height: 100px;  //divの高さ

//親要素
div {
  width: 100%;
  height: $div-height;          //親要素の高さ
  background-color: #000;

  //子要素
  & > p {
      line-height:$div-height;  //テキストの高さを親要素と同じにする
      text-align:center;        //横方向に中央寄せ
      color: #fff;
  }
}

画面

テキストが2行以上の場合

line-heightを使う方法はテキストが1行表示のときに上手くいきますが、2行以上になると親要素の枠からはみ出てしまいます。

2行以上のとき

ではどうすればいいのかというと「親要素の表示形式をtableに(display: table;)」、「テキスト要素の表示形式をtdに(display: table-cell;)」変更します。

html

<div>
    <p>
        中央寄せテキスト<BR>2行目突入
    </p>
</div>

scss

$div-height: 100px;  //divの高さ

//親要素
div {
  display: table;               //tableタグのような表示
  width: 100%;
  height: $div-height;          //親要素の高さ
  background-color:cyan;

  //子要素
  & > p {
      display: table-cell;      //tdタグのような表示
      vertical-align: middle;   //縦方向に中央寄せ
      text-align:center;        //横方向に中央寄せ
      color: black;
  }
}

画面

pタグにvertical-alignが効かない

「そもそもdisplay:tableなどを使わずに、pタグにvertical-align:centerを適用すれば上手くいくのでは?」と考える人もいるでしょう。
しかし、実際にやってみると縦方向に中央寄せできないことが分かります。

scss

$div-height: 100px;  //divの高さ

//親要素
div {
  width: 100%;
  height: $div-height;          //親要素の高さ
  background-color:cyan;

  //子要素
  & > p {
      vertical-align: middle;   //縦方向に中央寄せ
      text-align:center;        //横方向に中央寄せ
      color: black;
  }
}

画面

なぜpタグにvertical-alignが効かないのか?

なぜpタグにvertical-align:center;が効かないのかというとpタグのデフォルトの表示形式はブロック要素だからです。

HTMLタグの表示形式は以下の2種類に分かれており、デフォルトの値が決まっています。

  • インライン要素 (aタグ、spanタグ、imgタグ)
  • ブロック要素 (pタグ、divタグ、ulタグ)

この2つの大きな違いは要素が「縦に並ぶか?」、「横に並ぶか?」です。
インライン要素は横に並ぶようになっています。たとえば、aタグでリンクを追加しても改行は入らないですよね。

html

<p>AAA<a href="#">BBB</a></p>

画面

一方、ブロック要素は縦に並ぶようになっています。たとえば、pタグでテキストを追加すると改行が入ります。

html

<p>AAA</p>
<p>BBB</p>

画面

HTMLの表示形式には、この2種類があり、vertical-alignはインライン要素に適用され、ブロック要素に適用されません。なので、ブロック要素であるpタグは縦方向に中央寄せできないのです。

まとめ

  • pタグで縦方向に中央寄せするには1行だけのときは、line-heightを親要素の高さに合わせる
  • 2行になる時は親要素の表示形式をtableにして、テキストをtdにする
  • vertical-alignはインライン要素のみに適用されるため、ブロック要素であるpタグには無効

Discussion

最近だと親要素に対してdisplay: flexjustify-content: center(左右中央)、align-items: center(上下中央)をあてると楽ですね(ご存知でしたらすみません!)

ログインするとコメントできます