div 3개 가로 배열 | float:right 이탈 문제 해결

html로 div 요소를 CSS로 중앙 정렬하기는 사안에 따라 대단히 쉽습니다. 하지만 복합적인 조건들이 부가될수록 어려워지고 html의 한계에 봉착되면 아예 불가능해집니다.

아래 처럼 div를 가로로 배열하면 세 번째 영역이 이탈이 됩니다.

왼쪽 영역

float:left

가운데 영역

margin:0 auto

오른쪽 영역

float:right

하지만 html은 수많은 개별적 요소를 적절하게 조합하면 엄청난 위력을 발휘합니다. 아래는 단순히 html의 순서(5~8과 9~12)만 바꾼 결과입니다. 사소한 우주의 현상들이 서로 상충하여 예기치 않은 현상을 초래하듯이 세 번째 영역의 이탈 문제가 말끔히 해결되었습니다.

왼쪽 영역

float:left

오른쪽 영역

float:right

가운데 영역

margin:0 auto

<div class="left">
<p class="ival">왼쪽 영역</p>
<p class="ivalc">float:left</p>
</div>
<div class="right">
<p class="ival">오른쪽 영역</p>
<p class="ivalc">float:right</p>
</div>
<div class="center">
<p class="ival">가운데 영역</p>
<p class="ivalc">margin:0 auto</p>
</div>

위의 예시처럼 적절한 조합이란 로또복권의 당첨 확률과도 같아서 개인으로는 무척 어렵지만, 구글링을 통하면 한결 쉬워집니다. 왜냐하면 세계적으로 전문지식이 출중한 사람들이 해답과 방법을 부단하게 제시해 주기 때문입니다. div 요소 중앙정렬에 관한 주옥같은 html 코딩을 소개합니다.

이 예제는 기본적인 방식으로, 설명하는 글의 문단이 부모 div의 영역을 벗어난 경우입니다. 이미지 영역(div) 보다 문단 폭이 넓어 가독성이 떨어집니다.

예시 1

이 예제는 이미지 영역(div)과 설명하는 글의 문단 폭이 같아 가독성이 매우 높습니다. 아래처럼 스타일을 설정하면 완벽하게 중앙정렬과 함께 넓이가 같아집니다.

<style>
  #centro{/*이미지 div id*/
  margin-inline:auto;
  width:fit-content;
  }
.centro{/*문단 div class*/
  width:0;
  min-width:100%;
  font-size:17px !important;
  margin:0 auto;/*반드시*/
  }
  <style>

예시 2

이 예제는 부모(parent, 상위) div에 포함된 자식(child, 하위) div가 똑같이 화면 중앙에 정렬되고, <이미지 위에 글자>가 있는 자식 div의 내용이 부모 div의 범위를 벗어나지 않는 모습입니다.

간단해 보이지만 백방의 노력에도 불구하고 중앙정렬의 해법을 찾지 못해 필자처럼 포기하고 좌절하신다면 다음과 같은 스타일 지정으로 지금처럼 해결해 보시기 바랍니다.

<style>
.greeting{/*이미지 div class*/
   position:relative;
   margin-inline: auto;
   width:fit-content;
   display: flex; 
   overflow:auto;
  }
.gtitle {/*문단 div class*/
  display:table; 
  clear: both; 
  font-size:19px;
  font-weight:700;
  height: 2.6em; 
  position: absolute; 
  text-align:left; 
  top:10%; 
  color:#000; 
  padding:20px; 
  }
  <style>

의 관련글