テキストを中央揃えの左詰めにしたい

問題点としたいこと

１.三行あるテキストを真ん中左寄せにしたいです。
２.スマホサイズでのテキストの見え方を左寄せにしたいです。

試したこと

ググってみて解決法で、Pの親要素をtext-align:center;で指定した後に
子要素のPタグにtext-align:left;　　display:inline-block;すれば真ん中左寄せができると書いてあったので
試してみましたができませんでした。

下記の画像のようになっております。よろしくお願いします。

PCからスマホサイズ　４００

html
1<div class="top-wrapper ">
2    <div class="container">
3        <div class="heading">
4            <div class="experience-title">
5                <h1>ご入会の案内</h1>
6                <img src="#">
7            </div>
8            
9            <div class="experience-text">
10                <h2>入会資格</h2>
11                <p>幼児・小学生・中学生</p>
12                <p>ただし、５歳未満の幼児であっても練習中の父親の付き添いが可能な場合入会可とします。</p>
13                <p>上記以外の場合は、保護者との相談の上決定します</p>
14                <h2>練習時間</h2>
15                <p>毎週日曜日<span class="a">９時～１２時</span>（５年生以上は、土曜日練習もあります）</p>
16                <h2>練習場所</h2>
17                <p>太宰府梅林アスレチックスポーツ公園、福岡女子短期大学グラウンドなど。</p>
18                <h2>主な年間行事</h2>
19                <p>夏季合宿、交流戦など。</p>
20                <h2>入会金</h2>
21                <p>2,000円<span class="a">（入部時のみ）</span></p>
22                <h2>年会費</h2>
23                <p>20,000円<span class="a">（前期：10,000円、後期：10,000円 ）</span></p>
24                <h2>保険</h2>
25                <p><span class="a">800円</span></p>
26                <h2>服装</h2>
27                <p>クラブのユニフォーム一式（夏季はＴシャツ可）</p>
28                <p>ジャージ、Ｔシャツの背中に名前を縫い付ける。</p>
29                <p>※持ち物には全て名前を記入。</p>
30                
31                <h2>役割分担</h2>
32                <p>お茶の準備や用具運搬のお手伝いのご協力をお願いしています。</p>
33            </div>
34        </div>
35    </div>
36</div>

css
1.experience-title  {
2  text-align: center;
3}
4.experience-text h2  {
5  
6  padding-top: 30px;
7  border-bottom: 3px solid green;
8  display: block;
9}
10.experience-text p {
11  font-size: 20px;
12  text-align: left;
13  font-weight: bold;
14  display: inline-block;
15  margin-bottom: 25px; 
16}
17.experience-text {
18  text-align: center;
19  display: block;
20}
21.a {
22  color: red;
23}
24@media screen and (max-width: 480px) {
25  .experience-text {
26    text-align: center;
27    display: block;
28  }
29  .experience-text p {
30    text-align: left;
31    font-weight: bold;
32    display: inline-block;
33    margin-bottom: 25px; 
34  }
35  
36}

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

回答2件

仕様通りの結果です。
なんで、行を<p>で区切っているのか…

区切らずに、<p>の中で、1行分のテキスト<br>で折り返しすれば、
その<p>は一番文字数が多い行の幅が基準で、左寄せになるはずです。

あとは、hatena19さんの通りです。

投稿2020/01/13 14:58

LibertyBell3

総合スコア1084

noby_

2020/01/14 15:13

ありがとうございます。やってみます。

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

ベストアンサー

「三行あるテキスト」というのが何を指しているのか不明瞭ですが、
P要素のことなら、メディアクエリ内のdisplay: inline-block;をdisplay: block;に変更すればスマホサイズでは左寄せになります。

css
1@media screen and (max-width: 480px) {
2  .experience-text {
3    text-align: center;
4    display: block;
5  }
6  .experience-text p {
7    text-align: left;
8    font-weight: bold;
9    display: block; /*修正*/
10    margin-bottom: 25px; 
11  }
12}