11月 | 2010 | Almondlab

jQueryを使ってDIVボックスをセンター配置。

2010.11.07 / Notes

jQueryをリサイズイベントを応用して、ページに配置されたDIVボックスをセンターに配置する方法です。
センター配置にはCSSのプロパティ「top」「left」を使っています。ページ読み込み時、ウィンドウがリサイズされた時に上記のプロパティを設定することでセンター配置しています。
サンプルはこちら

<!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>
<title>center-box</title>
<style type="text/css">
html,
body {
	height: 100%;
	margin: 0px;
}
div#outer {
	width: 50%;
	height: 100%;
	background: #e6e6e6;
}
div#inner {
	position: relative;
	width: 200px;
	height: 200px;
	background: #b3b3b3;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	centerBox();
	
	//ウィンドウがリサイズされたとき
	$(window).resize(function() {
		centerBox();
	});
})

//外側のボックスと内側のボックスの余白を計り、内側のボックスに座標を設定
function centerBox() {
	var margin_top = ($("div#outer").height()-$("div#inner").height())/2;
	var margin_left = ($("div#outer").width()-$("div#inner").width())/2;
	$("div#inner").css({top:margin_top+"px", left:margin_left+"px"});
}
</script>
</head>
<body>
<div id="outer">
<div id="inner">BOX</div>
</div><!-- outer -->
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>center-box</title>

html,

body {

height: 100%;

margin: 0px;

}

div#outer {

width: 50%;

height: 100%;

background: #e6e6e6;

}

div#inner {

position: relative;

width: 200px;

height: 200px;

background: #b3b3b3;

}

</style>

$(function(){

centerBox();

//ウィンドウがリサイズされたとき

$(window).resize(function() {

centerBox();

});

})

//外側のボックスと内側のボックスの余白を計り、内側のボックスに座標を設定

function centerBox() {

var margin_top = ($("div#outer").height()-$("div#inner").height())/2;

var margin_left = ($("div#outer").width()-$("div#inner").width())/2;

$("div#inner").css({top:margin_top+"px", left:margin_left+"px"});

}

</script>

</head>

<body>

</div>

</body>

</html>

ページの読み込み時、ウィンドウがリサイズされた時に関数を実行しています。
センター配置には外側のボックスを内側のボックスの余白を計算して、内側ボックスの左上の座標を設定しています。

$(function(){
	centerBox();
	
	//ウィンドウがリサイズされたとき
	$(window).resize(function() {
		centerBox();
	});
})

//外側のボックスと内側のボックスの余白を計り、内側のボックスに座標を設定
function centerBox() {
	var margin_top = ($("div#outer").height()-$("div#inner").height())/2;
	var margin_left = ($("div#outer").width()-$("div#inner").width())/2;
	$("div#inner").css({top:margin_top+"px", left:margin_left+"px"});
}

$(function(){

centerBox();

//ウィンドウがリサイズされたとき

$(window).resize(function() {

centerBox();

});

})

//外側のボックスと内側のボックスの余白を計り、内側のボックスに座標を設定

function centerBox() {

var margin_top = ($("div#outer").height()-$("div#inner").height())/2;

var margin_left = ($("div#outer").width()-$("div#inner").width())/2;

$("div#inner").css({top:margin_top+"px", left:margin_left+"px"});

}