キーボードのF12キーを押して開発者ツールを起動すると、ページを再読込するまでCSSを一時的に変更することができます。
CSSの数値を変えるとどのように変化するのかを、お試しください。

インライン要素やブロック要素は左揃えのまま中央寄せできない

あいうえお
かきくけこさしすせそ
たちつてと

あいうえお
かきくけこさしすせそ
たちつてと

display: inline-block; を使う横幅が自動的に伸縮する中央寄せ

あいうえお
かきくけこさしすせそ
たちつてと

display: table; を使う横幅が自動的に伸縮する中央寄せ

あいうえお
かきくけこさしすせそ
たちつてと

display: flex; を使う横幅が自動的に伸縮する中央寄せ

あいうえお
かきくけこさしすせそ
たちつてと

acky.info

acky.info ロゴ

左揃えの文字を横幅が自動的に伸縮する中央寄せにする方法を、display: inline-block;display: table;display: flex;を使う3つのパターンで紹介します。
内容の幅が変わったときにCSSを調整しなくても中央寄せのままになるので、内容の変更が多いところに使うと便利です。

広告