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>要素に適用すると、その要素は親要素内で水平方向に中央揃えになります。ただし、このプロパティは、要素がブロックレベル要素である場合にのみ動作します。行レベル要素には効果がありません。

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

max-inline-size: max-content;ってなに？

max-inline-size: max-content;はCSSのプロパティで、要素のインライン方向（水平方向）のサイズを「最大コンテンツサイズ」に制限することを指定します。

要素の「最大コンテンツサイズ」とは、その要素が保持するコンテンツ（テキスト、画像など）のうち、最も大きなサイズを指します。つまり、要素の幅（横幅）がコンテンツのサイズに合わせて自動的に調整されます。

例えば、max-inline-size: max-content;が設定されたテキスト要素（<span>や<p>など）は、テキストの長さに基づいて自動的に幅が決まります。テキストが短い場合はその長さに合わせて幅が狭くなり、テキストが長い場合は自動的に幅が広くなります。