>  기사  >  웹 프론트엔드  >  div 센터링 example_javascript 기술의 JS 구현

div 센터링 example_javascript 기술의 JS 구현

WBOY
WBOY원래의
2016-05-16 16:52:111215검색
코드 복사 코드는 다음과 같습니다.

;


JS는 div 센터링<br><style>/ *외부 레이어 div가 중앙에 있음*/ <BR>#main { <BR>위치: 절대 /*매우 중요*/ <BR> background-color: <BR>width:400px <BR>height:200px; ; <BR> /*왼쪽:50%; <BR>왼쪽 여백:-200px <BR>여백:-100px;*/ <BR>경계:1px ; <BR> } <BR><BR>#content { <BR>위치: /*매우 중요*/ <br>배경색: <br>너비: 200px <BR>높이: 100px; <BR>/ *왼쪽:50%; <BR>위쪽:50%; <BR>여백-왼쪽:-100px;*/ <BR><BR>/*텍스트 div 내부는 중앙에 위치합니다*/ <BR>text-align: center; <BR>line-height:100px /*줄 간격은 div 너비와 동일합니다*/ <br>} <br></style> ; <BR><body> <BR> <div id="main"> <BR><div id="content"> <BR>일 <BR><BR> ;/div> <BR><script type ="text/javascript"> <BR>window.onload = function() { <BR>// 브라우저 창 가져오기<BR>var windowScreen = document.documentElement; 🎜>// main의 div 요소 가져오기<BR>var main_div = document.getElementById("main") <BR>// 창 너비와 높이 및 div 너비와 높이를 통해 위치 계산<BR>var main_left = (windowScreen.clientWidth - main_div.clientWidth)/2 "px"; <BR>var main_top = (windowScreen.clientHeight - main_div.clientHeight)/2 "px"; <BR>// 위치 할당<BR>main_div.style. left = main_left; <BR>main_div.style.top = main_top; <BR><BR>// mcontent의 div 요소 가져오기 <BR>var content_div = document.getElementById("content") <BR>var content_left = (main_div.clientWidth - content_div.clientWidth)/2 "px"; <BR>var content_top = (main_div.clientHeight - content_div.clientHeight)/2 "px" <br>content_div.style.left = <br> content_div.style.top = content_top; <BR><BR>} <BR></script> <BR></body> <BR><br></style>
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.