📔

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

2020/12/01に公開

6件

CSS

tech

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

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

HTML

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

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

モダンな書き方

書き方は何パターンもあるが、例えばpモダンなCSSを使えば以下の2行で実現できる ^[1]。

.text {
  margin-inline: auto;
  max-inline-size: max-content;
}

max-inline-size: max-contentにより「要素の最大サイズ = コンテンツのサイズ」となる。margin-inline: autoはmargin-left: auto; margin-right: auto;と同じような役割をしており^[2]、要素を中央寄せするために指定する。

どちらのCSSプロパティもすでに主要ブラウザで問題なく使用できる。

別の書き方

古くからあるCSSプロパティを使って書くこともできる ^[3]。

CSS

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

仕組み

display: tableが指定された要素は、子（テキスト）に応じた幅になる。テキストが短ければ、要素幅も短い。
tableの要素に対してはmargin-leftとmargin-rightにautoを指定してやれば、左右中央寄せになる。この部分はmargin-inline: autoと書いてもOK
text-align: leftになっていれば、テキストが折り返した場合には左寄せになる

脚注

@wild_onionさん、コメントありがとうございました。 ↩︎
一般的な左から右、上から下への書字方向の中で使った場合 ↩︎
@tak_dcxiさん、コメントありがとうございました。 ↩︎

Discussion

mpyw

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

catnose

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

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

TAK

めっちゃ亀ですけど

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

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

catnose

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

pie

2年前の記事ですが今だとこれでいけそうですね

.text {
  inline-size: max-content;
  margin-inline: auto;
}

catnose

コメントありがとうございます。加筆修正しておきました。

なおinline-sizeだと以下のようにボックスからはみ出してしまうことがあったので代わりにmax-inline-sizeを使う形にしました。

inline-size: max-contentを使った場合