Written by Kasumi

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

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

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

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

実装サンプル

See the Pen
テキストを中央配置にして左寄せにする方法
by Kohei (@kouk05)
on CodePen.0

実装サンプルです。

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

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

HTML

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

まずはHTMLを調整します。

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

CSS

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

最後にCSSで調整します。

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

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

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

まとめ

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

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

目次

関連記事

HTMLCSS プログラミング

【簡単】aタグのテキストが改行されない問題を解決する方法

2022.01.26
3100
HTMLCSS

画像をPCとスマホで切り替える方法【結論:picture要素を使おう】

2022.06.25
252
HTMLCSS プログラミング

横スライドメニューをhtml・CSSのみで実装【JS不要簡単】

2020.04.12
549
HTMLCSS プログラミング

スマホなどでaタグのリンクが2回タップしないと機能しない原因

2021.01.17
2069