如何將圖像和文字並排對齊？ HTML CSS 彈性盒

Question

現在文字在圖像下方對齊。我希望文字在圖像旁邊垂直對齊。我嘗試添加flex-direction: column和justify-content: center，但沒有起作用。我還嘗試了float，但也沒有起作用。我無法弄清楚如何將文字和圖像並排對齊。如何使它們並排對齊？我的程式碼中有錯誤嗎？

.whoweare {
  padding: 80px 0px 50px;
  background-color: #000000;
}

.whoweare #whoweareimg {
  width: 100%;
  min-width: 200px;
}

.whoweare .content {
  -webkit-display: flex;
  display: flex;
  flex-wrap: wrap;
  /* flex-direction: column; */
  /* justify-content: center; */
}

.whoweare .content .box {
  /* padding:5px;
flex:0 0 100%;
max-width: 100%; */
  padding: 5px;
  flex: 0 0 100%;
  max-width: 100%;
}

.whoweare .content #whoweareimg {
  width: 50%;
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  padding: 30px;
}

.whoweare .content h2 {
  font-size: 50px;
  font-weight: 500;
  margin: 20px;
  color: #ffffff;
  padding: 0px 0px 20px;
}

.whoweare .content p {
  font-size: 20px;
  line-height: 50px;
  color: #ffffff;
  margin: 20px;
  padding: 0px 0px 20px;
  font-family: 'Open Sans', sans-serif;
}

<section class="whoweare" id="whoweare">
  <div class="container">
    <div class="content">
      <div class="box text wow slideInRight">
        <!-- <div class="class-items"> -->
        <div class="item wow bounceInUp">
          <!-- <div class="item-img"> -->
          <img id="whoweareimg" src="https://via.placeholder.com/50" alt="classes" />
        </div>
        <div class="box text wow slideInRight">
          <h2>我們是誰</h2>
          <p>UNDRGRND Muscle & Fitness，街頭文化與健美和健身生活方式相結合。我們的目標是為我們的會員提供獨特的現代化培訓體驗，在沃恩/大多倫多地區。
            </br>
            </br>
            體驗一種獨特的訓練氛圍，以幫助您進行無與倫比的鍛鍊。 IFBB職業運動員提供專屬訓練課程，以幫助會員實現他們的生活方式和/或比賽準備目標。該設施將提供市場上最好的健身設備，包括Atlantis，Cyber​​，Arsenal等。
            </br>
            </br>
            在UNDRNRGD，我們都是一個大家庭，共同努力。
<p><br /></p>

Answer 1

您的HTML程式碼似乎有問題，因為其中一個<div class="box text wow slideInRight">嵌套在另一個<div class="box text wow在slideInRight">中，但無論如何，這是我為解決您的問題而提出的程式碼。

想法是.whoweare .content .box:first-child是您的彈性容器，它的兩個子元素（<div class="item wow bounceInUp">和另一個<div class="box text wow slideInRight">）將並排對齊。

.whoweare {
  padding: 80px 0px 50px;
  background-color: #000000;
}

.whoweare #whoweareimg {
  width: 100%;
  min-width: 200px;
}

.whoweare .content .box {
  padding: 5px;
  max-width: 100%;
}

.whoweare .content .box:first-child {
  display: flex;
}

.whoweare .content #whoweareimg {
  width: 50%;
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  padding: 30px;
}

.whoweare .content h2 {
  font-size: 50px;
  font-weight: 500;
  margin: 20px;
  color: #ffffff;
  padding: 0px 0px 20px;
}

.whoweare .content p {
  font-size: 20px;
  line-height: 50px;
  color: #ffffff;
  margin: 20px;
  padding: 0px 0px 20px;
  font-family: 'Open Sans', sans-serif;
}

<section class="whoweare" id="whoweare">
  <div class="container">
    <div class="content">
      <div class="box text wow slideInRight">
        <!-- <div class="class-items"> -->
        <div class="item wow bounceInUp">
          <!-- <div class="item-img"> -->
          <img id="whoweareimg" src="https://via.placeholder.com/50" alt="classes" />
        </div>
        <div class="box text wow slideInRight">
          <h2>我们是谁</h2>
          <p>UNDRGRND Muscle & Fitness，街头文化与健美和健身生活方式相结合。我们的目标是为我们的会员提供独特的现代化培训体验，在Vaughan/GTA地区。
            </br>
            </br>
            体验独一无二的培训氛围，帮助您进行无与伦比的锻炼。IFBB职业运动员提供独家培训课程，以帮助会员实现他们的生活方式和/或比赛准备目标。该设施将提供市场上最好的健身设备，包括Atlantis、Cyber、Arsenal等。
            </br>
            </br>
            我们都是一个大家庭，在UNDRNRGD这里我们都在一起。