文章を中央寄せの左詰にする方法

前提・実現したいこと

LP模写をしています。
文章を中央寄せにして文字の始まりは全て左づめにして
その文章をいくつかのまとまりにして間をあけるようにしたいです。

そこで全体をtext-align: centerで中央寄せにして
文章のまとまりをtext-align: leftに設定しました。
それだと文章のまとまりが左に並ぶので間にdivを挟みましたが全体的に文章のまとまりがずれてしまいます。

お手柔らかに教えていただけるとありがたいです。

HTML

 <div id="concept">
    <p id="concept_title">旅に出よう。</p>
    <p class="concept_message01">
        僕たちが作りたいのは<br>
        持っているだけで旅に出たくなるモノ。<br>
        持っているだけでわくわくするモノ。
    <p><!-- concept_message01 -->

    <div class="clearfix"></div>  

    <p class="concept_message01">
      それは新しい時代の”パスポート”<br>
      僕たちが作るものは、<br>
      そんな存在でありたい。
    </p>

    <div class="clearfix"></div>

    <p class="concept_message01"> 
      そして、人と人が繋がる<br>
      こんな時代だからこそ、<br>
      僕たちは、みんなでひとつのモノを<br>
      作ることを追求したい。
    </p>  

    <div class="clearfix"></div>

  </div><!-- concept -->

CSS

div#concept {
  width: auto;
  height: 917px;
  background-color: #f6f6f6;
  text-align: center;
  display: block;
  padding: 0 auto;
  padding-top: 125px;
}
p#concept_title {
  font-size: 44px;
  font-weight: 400;
  text-align: center;
  display: block;
  padding-bottom: 76px;
}
p.concept_message01 {
  font-size: 20px;
  text-align: left;
  display: inline-block;
  padding-bottom: 36px;
}

div.clearfix {
  clear: both;
}

coco_bauer

2020/12/17 08:58

[文章を中央寄せにして文字の始まりは全て左づめ]にした文章のサンプルを質問に追加してもらえませんか？手書きで良いので。中央寄せと左詰めを同時に満たすことはできないのではないかと思ってしまうのですが、できる実例を示して頂くと何がしたいのかが理解できるのではないかとおもうのです。

行動規範の内容に同意します

回答1件

ベストアンサー

下記のようなことでしょうか。

html
1<div id="container">
2  <div id="concept">
3    <p id="concept_title">旅に出よう。</p>
4    <p class="concept_message01">
5      僕たちが作りたいのは<br>
6      持っているだけで旅に出たくなるモノ。<br>
7      持っているだけでわくわくするモノ。
8    </p><!-- concept_message01 -->
9    <p class="concept_message01">
10      それは新しい時代の”パスポート”<br>
11      僕たちが作るものは、<br>
12      そんな存在でありたい。
13    </p>
14    <p class="concept_message01"> 
15      そして、人と人が繋がる<br>
16      こんな時代だからこそ、<br>
17      僕たちは、みんなでひとつのモノを<br>
18      作ることを追求したい。
19    </p>  
20  </div><!-- concept -->
21</div>

css
1div#container {
2  text-align: center;
3  background-color: #f6f6f6;
4}
5div#concept {
6  width: auto;
7  height: 917px;
8  text-align: center;
9  display: inline-block;
10  padding-top: 125px;
11  text-align: left;
12}
13p#concept_title {
14  font-size: 44px;
15  font-weight: 400;
16  text-align: center;
17  padding-bottom: 76px;
18}
19p.concept_message01 {
20  font-size: 20px;
21  padding-bottom: 36px;
22}