中央寄せがわかりません

Question

上の画像のようにしたいのですが、下のようになってしまいます。
どうしたらいいのでしょうか。

<div class="main_second_ul">
                <p>稼げるエンジニアに必要な５つのスキルとは？</p>
                <div id="main_head">
                    <div class="main_main"><img src="../images/o4.jpg"><p>基礎的な<br>プログラミングスキル</p></div>
                    <div class="main_main"><img src="../images/o5.jpg"><p>案件獲得に必要な<br>営業力</p></div>
                    <div class="main_main"><img src="../images/o6.jpg"><p>見積作成から<br>納品までの知識</p></div>
                    <div class="main_main"><img src="../images/o7.jpg"><p>自らの付加価値を<br>高めるスキル</p></div>
                    <div class="main_main"><img src="../images/o8.jpg"><p>フリーランス同士の<br>横のつながり</p></div>
                </div>
            </div>

.main_second_ul{
    border: 2px solid #ebb94d;
    border-radius: 6px;
    background-color: white;
    max-width: 1170px;
    margin: 0 auto;
    height: 240px;
    #main_head{
      display: flex;
      text-align: center;
    .main_main{
      text-align: center;
    }
        p{
          font-weight: normal;
          font-size: 12px;
       }
      }
    }

Comments

[退会済みユーザー]

またプロゲートかな・・
学習サイトならその前後で実践してるはずよ。

[退会済みユーザー]

好きです。
Line交換しませんか。

Answer 1

こちらで、いかがでしょうか?

#main_head {
  display: flex;
  /* text-align: center; */
  justify-content: center;
}

text-align: center;は文字を中央寄せにする仕組みです。
display: flex;で左右中央配置にする場合はjustify-content: center;と組み合わせます。
(flex-direction: column;を指定している場合はまた話が変わりますが)