cssで中央寄せだけどテキストは左揃えにする

2025年5月27日

横書きの場合、テキストは左揃えにします。
短いテキストの場合は中央揃えにするケースもあります。

ですが今回、ホームページ作りで次のような形にする必要がありました。

テキストは左揃えで、中央寄せにする。

えっ。どういうこと？

ちょっと想像がつきにくいですが、相反する指定を混在させる必要があります。
どうすればいいのか?

調べてみました。

今回やりたいこと。

今回やりたいのは左揃えの文章を中央に配置することです。
通常文章を左揃えにすると、以下のようになります。

これを以下のようにしたいのです。

テキストは左揃えだけれども、画面の中央にテキストが配置されています。
これをスタイルシートでどうやれば実現できるのか調べてみました。

調べたら思ったより簡単でした。

調べたら、思ったより簡単でした。
テキストを記述しているタグ（今回の例だとPタグ）にinline-blockを指定するだけで実現できました。

論より証拠。
実際にできたものがこちらです。

ソースはこちらです。

.boxを中央寄せにすれば、全体的に中央寄せになります。
pタグを inline-blockにすることで、テキストの横幅=文字列合計の横幅になります。
（通常Pタグの横幅は100%になりますが、inline要素があることで、横幅が100%でなくなります）

そのため、テキストは左揃え、レイアウトは中央寄せになるのです。

思いのほか簡単な方法で実現できました。
今まで.boxの横幅を指定したりしていましたが、今度からは横幅を気にせず中央寄せにできます。

久しぶりに、めからうろこな知識を得ることができました。

---

ホームページに関するお悩み事やご相談事がございましたら私どもまでご連絡ください。 鋭意ご対応申し上げます。

関連記事