이미지와 텍스트를 나란히 정렬하는 방법은 무엇입니까? HTML CSS 유연한 상자
<p>이제 텍스트가 이미지 아래에 정렬됩니다. 이미지 옆에 텍스트를 세로로 정렬하고 싶습니다. <code>flex-direction: column</code> 및 <code>justify-content: center</code>를 추가해 보았지만 작동하지 않았습니다. 또한 <code>float</code>도 시도했지만 역시 작동하지 않았습니다. 텍스트와 이미지를 나란히 정렬하는 방법을 알 수 없습니다. 어떻게 나란히 정렬할 수 있나요? 내 코드에 오류가 있나요? </p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">.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;
}</pre>
<pre class="brush:html;toolbar:false;"><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></pre>
