画像とテキストを並べて真ん中寄せにしたい

Question

画像とテキストを並べて真ん中寄せにしたいです。
記載したのように並べたいのですが、うまく綺麗に縦中央になりません。
2日かけてたくさん調べましたが、分かりませんでした。
詳しい方、お力添え願います。

<div class="section2-flexbox">

            <div class="section2-container flexbox">

                <img src="../アイコン素材/icon/me2.svg" alt="imacのロゴ">

            </div>

            <div class="section2-container-text flexbox">
                <h3>えみ</h3>
                <p>客先常駐で基幹系のヘルプデスクをしています。 時間や場所にとらわれない働き方をしたくて、Web系言語の勉強開始。 小さい頃から、1から何かを作ることが好きで、プログラミングの勉強が楽しいです。</p>


            </div>






        </div>

 .section2-flexbox {
        width: 80%;
        display: flex;
        justify-content: space-between;
        margin: 0 auto;
        text-align: center;
        /* background-color: darkgreen; */
    }

    .section2-container{
        width: 400px;
        display: flex;
        justify-content: center;
    }

    .section2-container img{
        width: 400px;
    }


    .section2-container-text {
        width: 40%;
        margin-right: 10%;
        background-color: darkorange;
    }

    .section2-container-text h3{
        font-size: 2.2rem;
        /* background-color: blue; */
        text-align: left;
    }
    
    .section2-container-text p {
        font-size: 1.8rem;
        line-height: 2;
        text-align: left;
        background-color: #d8b90b;
    }

    .flexbox{
        display: flex;
        align-items: center;
    }

Comments

[退会済みユーザー]

真ん中とは上下左右中央ということですか？

自身のポートフォリオですか？

[mmmin]

自分で作った練習用のポートフォリオです。
画像とテキストを並べて、上下左右中央にしたいのです。

Answer 1

並べ方のみを考慮して実装していますので、あとはご自身で調節してください。

<div class="section2-flexbox">
  <img src="https://via.placeholder.com/400" alt="imacのロゴ" />
  <div>
    <h3>えみ</h3>
    <p>客先常駐で基幹系のヘルプデスクをしています。 時間や場所にとらわれない働き方をしたくて、Web系言語の勉強開始。 小さい頃から、1から何かを作ることが好きで、プログラミングの勉強が楽しいです。</p>
  </div>
</div>

.section2-flexbox {
  width: 80%;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  text-align: center;
  align-items: center;
}

.section2-flexbox h3 {
  text-align: left;
}