📔

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。

Discussion

最初どんな仕組みなんだろう!?と思ったけど解説読んでみたら当たり前体操でした…
それでも過去にやりたかったときにパッと思いつかなかった気がするので、脳に刻み込んでおきたい

これ当たり前体操すぎて、僕も気づいたときにこれまでJSで頑張っていた労力を激しく後悔しました。

話がそれるのですが、実はZennではaxios-case-converter使ってます。これまで1度も問題が発生したことがなく超快適です。ありがとうございます🙏

めっちゃ亀ですけど

.text {
  display: table;
  margin: auto;
}

で余計なDOM(例だと.container)を減らして実現できたりします…

おー、素晴らしい。書き直しました。ありがとうございます。

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