본문 바로가기

javascript

div 레이어 스타일 position 가운데 정렬하는법

========================================================================================================

예시

========================================================================================================

 

<body>

    <div style="width:500px; background:#cccccc; height:100px; position:absolute; bottom:0px; left:expression(document.body.clientWidth /2) -240)>

입력할 내용

    </div>

</body>

 

========================================================================================================

설명

========================================================================================================

 

이런식으로 div에 스타일을 적용시키면 익스플로러의 크기가 변해도 레이어를 가운데에 정렬할 수 있다.

left 에 입력한 expression(document.body.clientWidth /2) -240)는 인터넷 익스플로러의 전체 넓이를 반으로 나눈뒤

다시 가운데 정렬시킬 레이어의 넓이의 반을 뺀 것이다

 

레이어의 넓이가 500인데 240을 뺀 이유는 스크롤바의 넓이도 생각해줘야 하기 때문이다

 

========================================================================================================

 

※ 주의 : style 태그의 position:absolute 때문에 만들 div는 다른 div에 영향을 주지 않는 레이어 스타일이 되어 좌표 계산이 필요


'javascript' 카테고리의 다른 글

javascript의 null과 undefined  (0) 2010.11.09
onClick 시 손가락  (0) 2010.10.11
userAgent 에이전트를 이용한 모바일 페이지로 자동 이동  (0) 2010.09.01
javascript Popup Boxes - 1  (0) 2010.04.19
javascript date()  (0) 2010.03.22