div 센터링 example_javascript 기술의 JS 구현-JS 튜토리얼-php.cn

div 센터링 example_javascript 기술의 JS 구현

WBOY

풀어 주다： 2016-05-16 16:52:11

원래의

1213명이 탐색했습니다.

코드 복사 코드는 다음과 같습니다.

 
 ; 
 
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>