7

画面の中央にdiv要素を配置する必要があります。以下に簡単なコードを見つけましたが、ページの「全高/ 2」ではなく、実際の画面の中央が必要です。

これは、要素を中央に配置するが実際の画面は中央に配置しないJqueryコードです。

jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
return this;}

私が言ったように、実際の画面サイズ（1366 * 768やユーザーがブラウザーのサイズを変更したものなど）を計算し、要素を画面の中央に配置する必要があります。したがって、ページを下にスクロールすると、常に中央のdivが中央にあるはずです。

4

3 に答える 3

11

fixedの代わりにポジショニングを使用しても問題がない場合はabsolute、次のようなものを使用できます。

jQuery.fn.center = function ()
{
    this.css("position","fixed");
    this.css("top", ($(window).height() / 2) - (this.outerHeight() / 2));
    this.css("left", ($(window).width() / 2) - (this.outerWidth() / 2));
    return this;
}

$('#myDiv').center();
$(window).resize(function(){
   $('#myDiv').center();
});

デモ： http： //jsfiddle.net/GoranMottram/D4BwA/1/

于 2013-02-26T13:57:00.693 に答える
1

それは動作します..このダイビングを#sample

そのcssスタイルを次のように指定します

#sample{
margin-left:auto;
margin-right:auto;
width:200px;//your wish
}

それがうまくいくと思います。

于 2013-02-26T13:41:35.127 に答える
0

これを試して：

var width=$("#div").css("width");
var half=width/2;
$("#div").css("marginLeft","-"+half+"px");

セレクターで#divを変更します。

于 2013-02-26T13:40:44.237 に答える