【CSS】テキストを左寄せの状態で中央にもってくる方法

今回は、テキストを左に寄せた状態で中央寄せにする方法を紹介します。

初心者の方はけっこう「あれ？どうやるんだろ」となります。

解決方法としては、text-align の left と center を組み合わせます。

サクッとできますのでさっそく見ていきましょう。

解決コード

See the Pen
text-center by t.h (@tomtom15)
on CodePen.

いかがでしょうか。

ポイントは ul を inline-block にして中央寄せ、そして li を左寄せにします。

初心者の方はけっこう text-align:center; を設定しただけで「あれ？なんで？」ってなるんですよね。

テキストの外側を中央寄せにすることを忘れないでください。

中央寄せの関連記事も紹介しておきます。