jQueryを使用してウェブページを水平方向と垂直方向にセンタリングする

-2

誰でもこのコードで何が問題なのか教えていただけますか？私は自分のウェブページを縦横に集中させようとしていますが、これはうまくいきません！それは私にとっては中心的なものではない。jQueryを使用してウェブページを水平方向と垂直方向にセンタリングする

<html> 
<head> 
    <title>String Functions</title> 
    <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script> 
    <script type="text/javascript"> 
    jQuery.fn.center = function() { 
    this.css("position", "absolute"); 
    this.css("top", ($(document).height() - this.height())/2 + $(document).scrollTop() + "px"); 
    this.css("left", ($(document).width() - this.width())/2 + $(document).scrollLeft() + "px"); 
    return this; 
    }; 

    $("#d1").center(); 
    </script>  
</head> 

<body> 

<div id="d1" style="background-color:red;width:100px; height: 100px;"></div>  

</body>

出典

2011-06-27 davidz

あなたはどんな問題を見ていますか？私は1つを見ない...私は文書に窓を変えた。 http://jsfiddle.net/euALd/ – CrazyDart

こんにちは、それはまったく私を中心にしていません。上記のコードは私が持っているものです。 – davidz

それは私のためにも働いています。どのブラウザを使用していますか？そして、コンソールはエラーを投げますか？ – Ivan

代わりにこれを試してみてください。

jQuery.fn.center = function() { 
    this.css({ 
     "position" : "absolute", 
     "top" : "50%", 
     "left" : "50%", 
     "margin-left" : (this.width()/2) * -1, 
     "margin-top" : (this.width()/2) * -1 
    }); 
};

絶対配置要素をセンタリングするための非常に信頼性の高い方法は、50％まで左または上からその位置を設定することであり、そのマージンは、オブジェクトの幅または高さを-halfします。

出典

2011-06-27 22:12:18 Jedediah

jQueryを使用してウェブページを水平方向と垂直方向にセンタリングする

答えて

関連する問題