[CSS] 웹표준화에 따른 중앙정렬 해보기

말그대로 중앙정렬이다.

어제 작업중에 내 컴퓨터에서는 중앙정렬로 잘 먹히고있는데

옆 두사람은 좌측정렬로 고정이 되어있더라..

당최 왜 그런지를 모르겠다.

 

내가 짠 div구조는 다음과 같다.

 

<div id="wrapper">

<div id="big_box">

 

<div id="box">

<div id="top">

-- 공통 메뉴부분.. 여기는 div class="" 로 지정되어있는것들이 있다. --

</div>

<div id="content">

     -- 내용부분.. 여기도 역시 div class=""가 다수있다 --

</div>

<div id="footer">

-- 보다시피 푸터..--

</div>

</div>

<div id="box2">

<div id="right">

-- 내용의 오른쪽 부분에 들어갈 내용들 --

</div>

</div>

 

</div>

</div>

 

뭐.. 알아보기 힘들수도 있겠지만..

wrapper는 당연히 width:100% 에 전체적인 틀이다.

big_box 는 wrapper에서 중앙정렬을 위해 넣은 단순히 그뿐일 div이다.

position은 top, content, footer에 relative를 먹이고

나머지는 absolute로 위치를 맞췄다.

 

wrapper 에 중앙정렬을 먹여서 가운데로 표시하려고 했고,

text-align:center; 로 당연히 가운데로 왔다.

 

하지만!! 첨에 적은것처럼 옆의 두사람은 좌측으로 고정이 되어있더라...

왜!!!! 왜????? 도대체 왜애애애애!!! ㅠㅠ

 

wrapper 와 big_box 와 box, box2의 포지션을 이래저래 다 만져보아도..

big_box 에게 중앙정렬은 먹히지가 않았다.

 

도무지 알수가 없었다.

 

하지만.. 역시 검색만이 살길...

이 부분을 블로그에 올려주신 많은 분들께.. 이자리를 빌어 감사의 말씀을 드리겠다 ㅠㅠ

 

태그가 안닫힌것도아니고, 그 어떤 문제점도 찾을 수 없었지만.

어느 블로그에서 한마디..

 

중앙정렬을 하려고 하는 div에다가 css 속성을 하나 먹이자!! margin: auto;

이렇게 auto를 먹이면 알아서 중앙정렬이 된다는 한마디..

 

margin: auto랑 중앙정렬이랑 어떤 관계가 있는지는모르지만

일단 해보자..

 

했더니 중앙정렬이 됐다 ㅠㅠ

수수께끼 투성이지만.. 하나 배웠다.

 

margin:auto;

 

기억하자..

그리고 나처럼 같은문제로 헤매이는 사람이 우연히 이 글을보고

문제를 해결할수있다면

나역시 기쁘겠다 ㅋㅋㅋ