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

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-leftとmargin-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。