📔

CSSでテキストが1行に収まるときだけ中央寄せする

1 min read 4

https://zenn.dev/catnose99/scraps/a1ec13e8a2d17350fbfe

ときどき1行に満たないテキストは中央寄せしたいが、1行以上になる場合は左寄せしたいことがある。これはCSSだけで簡単に実現できる。

こんなHTMLを用意してみる。短いテキストと長いテキスト、どちらも同じHTML構造になっている。

HTML
<p class="text">短い</p>

<p class="text">この文章はとにかく長いです。とても長いです。長すぎて大変です。長いです。長いんです。</p>

CSSは以下のようにする。

CSS
.text {
  display: table;
  margin: auto;
  text-align: left; /* 親要素に text-align: center が効いている場合はこちらも */
}

仕組み

  • display: tableが指定された要素は、子(テキスト)に応じた幅になる。テキストが短ければ、要素幅も短い。
  • tableの要素に対してはmargin-leftmargin-rightを指定してやれば、左右中央寄せになる。
  • text-align: leftになっていれば、テキストが折り返した場合には左寄せになる

2021/01/13追記: なお、上のCSSは@tak_dcxiさんに教えてもらったものです。ありがとうございます。

以前紹介していた方法
HTML
<div class="container">
   <p class="text">短い</p>
</div>

<div class="container">
   <p class="text">この文章はとにかく長いです。とても長いです。長すぎて大変です。長いです。長いんです。</p>
</div>
CSS
.container {
  text-align: center;
}
.text {
  display: inline-block;
  text-align: left;
}
  • display: inline-blockが指定された要素は、テキストの長さに応じた幅になる。テキストが短ければ、要素幅も短い。
  • inline-blockの要素に対してはtext-alignが効くので、親要素にtext-align:centerを指定してやれば要素が中央寄せになる。
  • inline-blockの要素自体にtext-align:leftを指定することで中のテキストは左寄せになる。
  • テキストが長くなればinline-blockの幅は最大になり、中身は左寄せになる。つまりCSSでテキストが1行に収まるときだけ中央寄せになる。

ちなみにinline-blockの代わりにinline-flexを使ってもOK。