화면 중앙으로 컨텐츠를 이동시키는 소스는 자주 사용하지 않으므로 코딩하기 어려울때가 있습니다.
jquery를 이용하여 함수호출로 소스코드가 자동으로 생성되게 만들어보았습니다.
screen_centerLayout("컨텐츠ID");
[전체 소스]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>레이아웃 중앙정렬</title>
<style type="text/css">
/*width는 필수요소 컨텐츠 안의 요소와 동일해야 됩니다.*/
#message{width:300px;height:300px;border:1px solid #cc0000;visibility:hidden;}
</style>
</head>
<body>
<div id="message">
가운데 화면입니다.
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
screen_centerLayout("message");
function screen_centerLayout(id){
$("html").css("height","100%");
$("body").css("height","100%");
var elm = $('#'.concat(id));
elm.css({position:'absolute',left:(document.body.clientWidth/2-parseInt(elm.css('width'))/2),top:( document.body.clientHeight/2- parseInt(elm.css('height'))/2)});
if(!screen_centerLayout.isRezister){
screen_centerLayout.isRezister = true;
$(window).resize(function(){ screen_centerLayout(id);});
}
$(function(){
elm.css("visibility","visible");
});
}
//]]>
</script>
</body>
</html>
[출처] HTML CSS 화면 중앙에 컨테츠 위치 시키기(2) |작성자 홈메이커
'HTML > CSS' 카테고리의 다른 글
| [CSS 강좌] 테이블(table) 테두리 없에고 아랫줄만 넣기 (0) | 2015.12.17 |
|---|---|
| [공유] HTML CSS 화면 중앙에 컨테츠 위치 시키기(1) (0) | 2015.11.19 |
| [공유] css_overview(css 적용/우선순위/이미지삽입 ) (0) | 2015.11.19 |