トップ HTML/CSS テキストを左揃えのまま中央寄せする方法【改良版】

テキストを左揃えのまま中央寄せする方法【改良版】

CSSでテキストを左揃えのまま中央寄せする方法として、display: inline-block;を使う方法がありますが、

• 2つの要素にCSSを指定する必要がある。
• inline-blockなので、幅が小さいと、前後の要素と同じ行に入ってしまう。

という問題があり、個人的には少し使いずらいと思います。

今回、display: table;を使った、よりスマートな方法を見つけたのでご紹介します。

1. display: tableを使ってテキストを左揃えのまま中央寄せする方法
   1. display: tableを使った方法のデモ
   2. display: tableを使った方法のソースコード
2. display: tableを使う方法のメリット等を解説

display: tableを使ってテキストを左揃えのまま中央寄せする方法

display: tableを使った方法のデモ

以下はデモンストレーションです。その下にソースコードもあります。

See the Pen JjomZPM by ゆきまる (@yukimaru-org) on CodePen.

display: tableを使った方法のソースコード

具体的には以下のコードで、テキストを左揃えのまま中央寄せできます。

HTML

<p>
親譲りの無鉄砲で<br>
小供の時から損ばかりしている。<br>
別段深い理由でもない。
<p>

CSS

p {
  display: table;
  margin: 0 auto;
}

display: tableを使う方法のメリット等を解説

左寄せのまま中央寄せしたい要素にdisplay: table;とmargin: 0 auto;をかけるだけです。

display: inline-block;を使う方法と違い、わざわざ親要素にtext-align: center;をかける必要もありませんし、tableはブロックレベルなので、同じ行に他の要素が入ってしまう心配もありません。

最近知ったので、もしかしたら思わぬ動作をするかもしれませんが、この方法は完全に上位互換だと思っています。

僕は以前まで、 display: inline-block; を使った方法しか知りませんでしたし、
google先生で「css 左揃え 中央寄せ」で検索しても、 display: inline-block; を使った方法が上位を占めているので、多くの人はこの方法しか知らないんじゃないでしょうか？

display: tableを使った、このよりよい方法が広まればいいなと思います。