이미지와 텍스트를 나란히 정렬하는 방법은 무엇입니까? HTML CSS 유연한 상자

Question

이제 텍스트가 이미지 아래에 정렬됩니다. 이미지 옆에 텍스트를 세로로 정렬하고 싶습니다. flex-direction: column 및 justify-content: center를 추가해 보았지만 작동하지 않았습니다. 또한 float도 시도했지만 역시 작동하지 않았습니다. 텍스트와 이미지를 나란히 정렬하는 방법을 알 수 없습니다. 어떻게 나란히 정렬할 수 있나요? 내 코드에 오류가 있나요?

.whoweare {
  패딩: 80px 0px 50px;
  배경색: #000000;
}

.whoweare #whoweareimg {
  너비: 100%;
  최소 너비: 200px;
}

.whoweare .content {
  -웹킷 디스플레이: 플렉스;
  디스플레이: 플렉스;
  플렉스 랩: 랩;
  /* 플렉스 방향: 열 */
  /* 정당화-내용: 센터 */
}

.whoweare .content .box {
  /* 패딩:5px;
플렉스:0 0 100%;
최대 너비: 100% */
  패딩: 5px;
  플렉스: 0 0 100%;
  최대 너비: 100%;
}

.whoweare .content #whoweareimg {
  너비: 50%;
  -webkit-transform: 회전Y(180deg);
  변환: 회전Y(180deg);
  패딩: 30px;
}

.whoweare .content h2 {
  글꼴 크기: 50px;
  글꼴 두께: 500;
  여백: 20px;
  색상: #ffffff;
  패딩: 0px 0px 20px;
}

.whoweare .content p {
  글꼴 크기: 20px;
  줄 높이: 50px;
  색상: #ffffff;
  여백: 20px;
  패딩: 0px 0px 20px;
  글꼴 모음: 'Open Sans', sans-serif;
}

<section class="whoweare" id="whoweare">
  <div class="컨테이너">
    <div class="content">
      <div class="box text 와우 SlideInRight">
        <!-- <div class="class-items">
        <div class="item wowounceInUp">
          <!-- <div class="item-img">
          <img id="whoweareimg" src="https://via.placeholder.com/50" alt="classes" />
        </div>
        <div class="box text 와우 SlideInRight">
          <h2>우리는 누구입니까</h2>
          <p>UNDRGRND Muscle & 피트니스, 스트리트 문화와 보디빌딩 및 피트니스 라이프스타일이 만났습니다. 우리의 목표는 회원들에게 본/광역 토론토 지역에서 독특하고 현대적인 교육 경험을 제공하는 것입니다.
            </br>
            </br>
            비교할 수 없는 운동을 제공하는 데 도움이 되는 독특한 훈련 분위기를 경험해 보세요. IFBB 프로 선수들은 회원들이 라이프스타일 및/또는 대회 준비 목표를 달성할 수 있도록 돕기 위해 독점적인 훈련 세션을 제공합니다. 이 시설은 Atlantis, Cyber, Arsenal 등을 포함하여 시장에서 최고의 피트니스 장비를 제공할 것입니다.
            </br>
            </br>
            UNDRNRRGD에서 우리는 모두 함께 일하는 하나의 대가족입니다.
<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">) 나란히 정렬해 보세요.

으아악 으아악