はじめに

ウェブ開発において、テキストが1行に収まる場合にのみ中央揃えし、複数行にわたる場合は左揃えを保ちたい場合は、適切なCSSのテクニックを使えば簡単に実現できます。この記事では、1行に収まる場合にのみCSSでテキストを中央揃えする方法を紹介します。

モダンなアプローチ

このタスクを実行するための1つの方法は、CSSの最新の機能を利用するものです。2行のコードブロックを使うだけで、望む効果を得ることができます。関連するCSSのプロパティは、margin-inline: autoとmax-inline-size: max-contentです。以下にコードの例を示します。

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

max-inline-size: max-contentは、要素の最大サイズをそのコンテンツのサイズに合わせます。margin-inline: autoは、margin-left: auto; margin-right: auto;と同様の動作をし、要素を中央揃えします。

代替方法

もう一つの方法は、CSSのいくつかのプロパティを使用して同じ効果を実現することです。このアプローチは、古いバージョンのCSSで作業している場合や、モダンなプロパティがサポートされていない場合に役立ちます。実装方法は次の通りです。

.text {
  display: table;
  margin-left: auto;
  margin-right: auto;
  text-align: left; /* Use this if the parent element has text-align: center applied */
}

このアプローチの仕組みは次のとおりです。

• 要素にdisplay: tableを指定すると、その幅がコンテンツに基づいて調整されます。したがって、テキストが短い場合、要素の幅は狭くなります。
• テーブル要素は、margin-leftとmargin-rightの両方をautoに設定することで水平方向に中央揃えされます。これはmargin-inline: autoでも可能です。
• text-align: leftが設定されている場合、テキストは複数行に折り返されたときにも左揃えのままでになります。