SQLの窓 イラストAC フリー素材

2018年02月26日

jQuery で DIV の中の DIV を縦横中央に配置する

ブラウザによって、誤差が 1px 程度あるみたいですが、だいたいにおいてこんなもので行けそうな気がします。
コンテンツ


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function(){

	$("#box")
		.css(
			{
				"width": "400px",
				"height": "200px",
				"border": "1px solid #000"
			}
		);

	var h1 = $("#box").outerHeight();
	var h2 = $("#target").outerHeight();

	$("#target")
		.css( 
			{
				"width": "200px",
				"text-align": "center",
				"border": "1px solid #000",
				"margin-left" : "auto",
				"margin-right" : "auto",
				"margin-top": "calc( (" + h1 + "px / 2) - " + (h2/2+2) + "px )"
			} 
		);
	
});
</script>
<div id="box">
	<div id="target">コンテンツ</div>
</div>

$("#target").outerHeight() が、フォントサイズか line-height に影響を受けて、奇数の場合は 1ピクセルずれる感じです。
コンテンツ



【jQueryの最新記事】
posted by at 2018-02-26 00:26 | jQuery | このブログの読者になる | 更新情報をチェックする


Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX