CSSで文字を左揃えのまま中央寄せする方法｜幅をコンテンツに合わせて可変にする

CSSを書いていると、次のようなレイアウトにしたいことがあります。

文字は左揃えのまま、要素自体を中央に配置したい。

さらに、

要素の幅を固定したくない
コンテンツの幅に合わせて要素の幅を変えたい

という条件です。

今回は、このような場合に使えるCSSを紹介します。

`text-align: center`では文字も中央揃えになる

まず、次のように書く方法を考えるかもしれません。

.box {
  text-align: center;
}

しかし、これでは文字自体が中央揃えになります。

今回やりたいのは、

.box {
  text-align: left;
}

の状態を維持したまま、.boxを中央に配置することです。

`margin: 0 auto`だけではうまくいかない？

要素を中央寄せするときによく使うのが、

margin: 0 auto;

です。

例えば、

.box {
  width: 300px;
  margin: 0 auto;
  text-align: left;
}

とすれば、幅300pxの.boxを中央に配置できます。

しかし今回は、幅を300pxなどに固定したくありません。

コンテンツの量に応じて、要素の幅も変えたいとします。

そこでwidth: fit-contentを使います。

`width: fit-content`を使う

今回のようなケースでは、次のように書けます。

.box {
  width: fit-content;
  margin: 0 auto;
  text-align: left;
}

ポイントは、

width: fit-content;

です。

これによって、要素の幅をコンテンツに合わせることができます。

そして、

margin: 0 auto;

で、その要素自体を中央に配置します。

text-align: leftを指定しているので、要素の中の文字は左揃えのままです。

実際の動きをCodePenで確認する

実際にブラウザでどのように表示されるのか、CodePenで確認してみます。

HTML

    <div class="box">
      <p>テキスト</p>
      <p>テキストテキスト</p>
    </div>

CSS

.box {
  width: fit-content;
  margin: 0 auto;
  text-align: left;
}

実際にCodePen上で表示を確認すると、文字は左揃えのまま、コンテンツのまとまりが中央に配置されていることが分かります。

`display: table`を使う方法もある

以前からある方法として、display: tableを使う方法もあります。

.box {
  display: table;
  margin: 0 auto;
  text-align: left;
}

これでも、コンテンツに合わせた幅の要素を中央に配置できます。

ただし、今回の目的は「テーブルとして表示したい」のではなく、コンテンツに合わせて要素の幅を変えたいということです。

そのため、現在のCSSで書くなら、

width: fit-content;

のほうが意図が分かりやすいでしょう。

まとめ

「文字は左揃えのまま、要素自体を中央寄せしたい」という場合、さらに要素の幅をコンテンツに合わせて可変にしたいのであれば、次のCSSが使えます。

.box {
  width: fit-content;
  margin: 0 auto;
  text-align: left;
}

それぞれの役割は、

CSS	役割
`width: fit-content`	コンテンツに合わせて要素の幅を決める
`margin: 0 auto`	要素自体を中央に配置する
`text-align: left`	要素内の文字を左揃えにする

です。

**「文字を中央揃えにする」のではなく、「左揃えのコンテンツが入った要素を中央に配置する」**と考えると分かりやすいと思います。

width: fit-contentを使えば、幅を固定せずにこのレイアウトを実現できます。