0

divがあります。ユーザーがページをスクロールしているときでも、画面の中央（つまり表示可能領域）にこのdivを表示する必要があります。

したがって、そのスタイルは（たとえば）

{position:fixed; top:90px; left:150 px; z-index:9999; overflow:hidden;}

次に、すべてのページでdivが画面の中央（つまり表示可能領域）に配置されるように、leftとtopの値を見つける必要があります。

javascriptまたはjqueryでleft＆topの値を見つけるにはどうすればよいですか？

4

6 に答える 6

5

left:50%; top:50%;中央に配置し、固定の幅と高さを適用して設定margin-topしmargin-left、その半分を負に設定widthしheightます。

于 2012-09-07T20:39:22.260 に答える
2

固定位置で何かを中央に配置するには、要素の高さと幅を知る必要があります。

次に、 margin-topandmargin-leftの負の半分widthをheight中央に配置する必要があります。

たとえば、このクラスは 100pxheightと 200pxを持つ要素を中央に配置しwidthます。

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;
}

http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

更新: ページの読み込み前に中央に配置する必要がある要素の高さと幅がわからない場合は、JavaScript を使用してサイズを検出する必要があります。

これを行う方法の実例を次に示します - http://jsfiddle.net/3Ag97/1/

于 2012-09-07T20:42:22.647 に答える
0

これを試して：

var $box = $('#box');

var bw = $box.width() / 2;
var bh = $box.height() / 2;

var wh = $(window).height() / 2;
var ww = $(window).width() / 2;

$box.css({'left': ww-bw, "top": wh-bh})

http://jsfiddle.net/mqMwj/

于 2012-09-07T20:48:33.710 に答える
0 
function centerObject(selector) {
var x = $(window).height() - $(selector).height();
var y = $(window).width() - $(selector).width();
$(selector).css("left", y / 2).css("top", x / 2);
};
于 2012-09-07T20:49:20.423 に答える
0 
#divX {
    position: fixed; 
    left: 50%; 
    top: 50%; 
    width: 100px; 
    height: 100px; 
    margin-left: -50px; 
    margin-top: -50px; 
    background-color: #0000FF;
}
于 2012-09-07T20:51:42.340 に答える
0

まだ広くサポートされていませんが、flexbox モジュールを使用できます: http://jsfiddle.net/b7nrS/。

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}
于 2012-09-07T20:44:06.870 に答える