【CSS】テキストを中央配置にして左寄せにする方法

CSSを使ってテキストを中央配置にして左寄せにしたい。

本記事ではこのような悩みを解決。

実装例を元に解説します。

実装サンプル

実装サンプルです。

最大文字数行の横幅に合わせて中央配置され、左寄せになってます。

実装方法は以下の通りです。

<p><span>世界のみなさんはじめまして。<br>○○です。</span></p>

まずはHTMLを調整します。

中央配置・左寄せにしたいHTMLタグ（以下親要素）内をspanタグなどで囲います。

p {
  text-align: center;
}
p span {
  display: inline-block;
  text-align: left;
}

最後にCSSで調整します。

親要素にtext-align: center;を付与。

子要素にdisplay: inline-block;、text-align: left;を付与します。

以上で中央配置・左寄せの完成です。

CSSを使ってテキストを中央配置にして左寄せにする方法について紹介しました。

以上で解説を終わります。