CSSで文章を縦並び中央寄せ文頭左揃えにしたい

実現したいこと

複数行のpタグの文章を中央寄せ文頭左揃えで配置したい

前提

CSSで模写コーディングをしています。
複数行にわたるpタグの文章を中央揃えにしたいのですが、文頭は左揃えで配置したく
text-align:center;だと文頭が左揃えにならないので困っています。

以下現在のコード

HTML

旅に出よう。 僕たちが作りたいのは持っているだけで旅に出たくなるモノ。持っているだけでわくわくするモノ。 それは新しい時代の “パスポート”僕たちが作るものは、そんな、存在でありたい。 そして、人と人が繋がるこんな時代だからこそ、僕たちは、みんなでひとつのモノを作ることを追求したい。 それは、自分と世界を繋げる旅のモノづくりブランド

CSS

section.massege{
background-color: #f6f6f6;
width: 100%;
}

section.massege h2{
text-align: center;
margin-top: 110px;
font-size: 2.75rem;
font-weight: normal;
letter-spacing: 0.1rem;
}

試したこと

別のサイトで、
親要素にtext-align:centerを指定して
子要素(p)にdisplay:inline-block
text-align:leftを指定するという方法を見かけて試したのですが、
pにdisplay-inlineを指定するとそれぞれのpが縦並びではなく横並びになってしまいレイアウトが崩れてしまいます。

あくまでそれぞれのpとbrを縦並びを保った状態で、中央配置で文頭を左揃えにしたいです。
どうすればよろしいのでしょうか。
まだまだ初学者でわからないことばかりですが、お力添えいただけるとありがたいです。

コメントを投稿

0 コメント