text-align:center;で中央寄せができない

Question

下記の"concept"の"text"部分を中央寄せしたいのですが、中央寄せになりません。
text-align:center; とmargin:0 auto;を試しても、左に寄っていて、中央寄せができません。
どうすればよいでしょうか。よろしくお願いいたします。

 <div class="main-contents" id="concept" >
            <div class="contents">
            <div class="concept">
              <div class="text">  
                        <h2>concept</h2>
                        <p>初めての方へ<br>
                        <br>ここにテキストが入ります。
                        <br>ここにテキストが入ります。
                        <br>ここにテキストが入ります。
                        <br>ここにテキストが入ります。
                        <br>ここにテキストが入ります。
                        <br>ここにテキストが入ります。
                        <br>ここにテキストが入ります。</p><br>
                        <a href="concept.html"><div class="text-a">more</div></a>
                    </div>
                <img src="img/milkyway.jpg">
            </div>
            <div class="menu">
                <img src="img/constellationclock.jpg">
                <div class="text">
                    <h2>consulting menu</h2><p>コンサルメニュー<br><br>ここにテキストが入ります。
                        <br>ここにテキストが入ります。
                        <br>ここにテキストが入ります。
                        <br>ここにテキストが入ります。
                        <br>ここにテキストが入ります。
                        <br>ここにテキストが入ります。</p><br>
                        <a href="consulting menu.html"><div class="text-a">more</div></a>
                    </div>
                
                
                
            </div>
            </div>
             <div class="image">
                    <img src="img/asclepius4.png">

             </div>
        
        </div>
``````CSS
    .main-contents{
        flex-wrap:wrap;
    
    }
    .contents img{
        width:50%;
        height:auto;
    }
    .contents{
        text-align:center;
        width:90%;
        margin-left:20px;
    }
    .concept{
        flex-wrap:wrap;
        margin:0 auto;
        max-width:350px;
        display:inline-block;
　　　　text-align:center;
    }
    .concept text{
        display:inline-block;
        text-align:center;
        
    }
    .image{
        margin:0 auto;
        width:60%;
    }
    .image img{
        text-align:center;
    }

Comments

[agumon]

コード確認しましたが全体でセンター寄せになっているようです。
もう一度よく確認してみてください。

[Daregada]

質問者がCSSで指定した通りの表示になっています。
もしかして、「左に寄っていて」とは、クラスtextが指定された領域が「ページ全体の中央に表示されていない」ということでしょうか。

[umi-ushi]

ご回答ありがとうございます。返信が遅くなりすみません。
はい。Daregadaさんのおっしゃる通りで、クラスtextが指定された領域が「ページ全体の中央に表示されていない」ので、中央寄せにしたいんです。どのようにすればよいでしょうか。

Answer 1

main-contentsクラスのdiv要素の中に、contentsクラスのdiv要素があり、その中にconceptクラスのdiv要素があり、その中にtextクラスのdiv要素がある、という構造ですね。

まず、CSSの以下の部分が間違っています。

-.concept text{
+.concept .text{

textは要素名ではなくクラス名なので、先頭にドットを付けてください。もっとも、これは「textクラスに書かれたテキストがページ全体の中心に表示されない」原因ではありません。

「textクラスに書かれたテキストがページ全体の中心に表示されない」原因は、contentsクラスのdiv要素がmain-contentsクラスのdiv要素の中央に表示されていないからです。contentsクラスのスタイルに、border: 1px green solid;とでもして枠線を表示してみればわかります。

.contents {
    text-align: center;
    width: 90%;
    margin-left: 20px;
    border: 1px green solid;
}

確認できたら、margin-left: 20px;をmargin: 0 auto;に変更してみてください。おそらく、質問者が望んでいる表示になるかと思います。

Comments

[umi-ushi]

丁寧なご説明、ありがとうございます!とても助かりました!✨