[html/css] div 가운데 정렬 / 이미지 가운데 정렬

div 태그로 html 문서 css 가운데 정렬하는 게 참 어렵죠.

여러가지 방법으로 div 중앙 정렬을 시도해봅니다.

이 글의 중후반부에 그 사례들을 제시해놓겠습니다.

저는 <div …></div>로  감싸진 자바스크립트 구문과 div 이미지 가운데 정렬을 위해 div의 속성인 float:left;margin:0 o auto와 position 속성자 등으로 하기도 하는데 검색을 해보고 여러 방법을 시도해봤습니다.

참 잘 안되더군요.

html-css-div-tag-image-center-align_01

특히 전자인 div태그로 감싸진 자바스크립트 파일이 더욱 css div 정렬로는 어렵더군요.

왼쪽 정렬인 float:left, 오른쪽 정렬인 float:light 등은 비교적 쉬운 편에 속합니다.

그런데, div css 정렬이 왜 어려울까요?

그것은 div가 자체가 하나의 구획 또는 영역을 지칭하기 때문이지 않나 합니다.

즉, 이미지가 하나의 요소(entity)라면 div=division과 같이 하나의 구획, 영역을 뜻하는 ‘요소’이기 때문입니다.

그러면  어떻게 할까요? 화면 가로 폭의 100%를 뜻하는 <div> 태그를 한번 정하고, 그 안에 들어오는 <div>를 다양한 방법으로 가운데 정렬 시키는 시도를 합니다.

div css 태그 중앙 정렬은 외부에 div 태그로 한번 더 감싸야 중앙 정렬이 이루어지네요.



<div …></div> 태그 안에 자바 스크립트로 이루어진 writeln이 있는 경우 또 어떤 경우엔 <p> 태그로 감싸야 되는 경우도 있더군요.

<p style=”text-align:center”><div>…<div></p>와 같이 말입니다.

 

한번 실례를 들어볼까요? 이미지 가운데 정렬을 위해 이미지를 하나 불러 오겠습니다.

모바일에서도 정렬이 보여야 해서 가로 150 px 크기의 이미지를 준비했습니다.

 

아래 이미지 정렬 태그는  <img src=”http://~~~~/sample.jpg”  width=”150″ height=”120″ align=”center” />형식으로 올렸습니다.

 

html-css-div-tag-image-center-align_02_150

 

<div align=”center”><img src=”http://~~~~/sample.jpg” width=”150″ height=”100″ /></div>

형식의 경우는 다음과 같습니다.

 

html-css-div-tag-image-center-align_02_150

 

<div align=”right”><img src=”http://~~~~/sample.jpg” width=”150″ height=”100″ /></div>

는 다음과 같이 우측으로 정렬 됩니다.

html-css-div-tag-image-center-align_02_150

 

<div align=”left”><img src=”http://~~~~/sample.jpg” width=”150″ height=”100″ /></div>

는 왼쪽으로 정렬됩니다.

html-css-div-tag-image-center-align_02_150

 

<div style=”float: left; background: green; width: 150px; height: 120px;”></div>
<div style=”clear: both;”></div>

<div align=”center”>
<div style=”background: green; width: 150px; height: 120px;”>123</div>
</div>
위와 같이 float:left를 없에니 아래와 같이 중앙 정렬 됩니다. float:left가 있는 경우 해보니 좌측으로 정렬되더군요.
123

html-css-div-tag-image-center-align_02
이상으로 몇가지 방법으로 시도해본 [html/css] div 중앙 정렬 / css 중앙 정렬 관련 포스팅을 마치겠습니다.