CSSで行数によって位置の調整ができた話

できる限り変なタグやclassをつけたくないタイプのコーダー、オガワです。

デザイナーさんから「1行の時は中央揃え、2行以上の時は左揃えにできますか？」なんてことをよく相談されます。
「内容が更新されなければclass振ってできますよ〜」なんて返していたのですが、更新性があるコンテンツでもやりたい！というのが本音です。

できる方法ないかなぁなんて思っていたところ、Xで実はできる！という情報を見かけました！
今回はそのプロパティについて検証したいと思います！

試してみる

See the Pen Untitled by spiqa design (@spiqa_design) on CodePen.

試したところ、きれいに1行の時は中央揃え、2行になると左揃えになりました！
色々な記述をしていますが、大事なのはこの2つ。

margin-inline: auto;
max-inline-size: max-content;

インライン要素の幅や位置を調整することで、調整が可能でした！
ちょっとした工夫で意外となんとかなるもんですね。

まとめ

無理やりclassやタグを足さなくても、ちょっとした工夫でいい感じにできる小技は大事ですね…！
まだまだいろんな小技があると思うので、これからも探していきたいと思います！