トップページ
blog
CSS
CSS ２行になったら左寄せ1行なら真ん中寄せ

CSS ２行になったら左寄せ1行なら真ん中寄せ

公開日:2023/04/16
最終更新日:2023/05/18
ライター：attrip

CSSでとくにたタイトルまわりでこんな悩みありませんか？

１行なら真ん中揃えで２行なら左寄せにしたいこと。
そんなときには、こちらのCSSが有効です。

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

margin-inline: auto; ってなに？

margin-inline: auto;は、要素の水平方向の余白（マージン）を自動的に計算して中央揃えにするCSSのプロパティです。margin-inlineは、margin-leftとmargin-rightの両方を同時に操作するために使用される新しいCSS論理プロパティであり、水平方向の余白を一括で操作できます。

このプロパティを使用すると、要素を水平方向に中央に配置できます。たとえば、margin-inline: auto;を<div>要素に適用すると、その要素は親要素内で水平方向に中央揃えになります。ただし、このプロパティは、要素がブロックレベル要素である場合にのみ動作します。行レベル要素には効果がありません。

なるほど行レベル要素ではないので改行すると左揃えにすることができるのね。