😽

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

2021/01/30に公開1件

CSS

HTML

Scss

tech

この記事では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;
  }
}