0

画面の領域の中央の高さにオブジェクトを配置しようとしています。このコードは、オブジェクトの Y 位置を計算するのに役立つと思いました。

var y = $chart.offset().top + $chart.outerHeight()/2;

しかし、オブジェクトはグラフの上から約 60% を表示しており、それよりも低い位置にあります。デバッガーからの実際の数値を次に示します。

$chart.offset().top
367.79999923706055
$chart.outerHeight()
451
y
593.2999992370605

このようなことを行う正しい方法は何でしょうか?

4

3 に答える 3

1

このソリューション (コメント) に jQuery を使用することに厳密に縛られているわけではないようですが、他の代替手段については知りませんでした。だから私は1つを提案します。

別のアプローチ - CSS を使用する

JavaScript を使用して要素を配置する代わりに、代わりに CSS を使用して、要素fixedを画面の中央に配置できます。最も明白な利点のいくつか:

  1. クライアントで追加のコードを実行する必要がない = パフォーマンスの向上
  2. 要素はドキュメントのスクロールに関係なく集中化されたままです - Javascript を使用して同じことが必要な場合は、スクロール イベントで位置を再計算する必要がありますが、Javascript の実行は(まだ) その瞬間ではないため、ドキュメントが高速にスクロールされると要素がジャンプします。

要素を動的に追加しているので、CSS ファイルの中心位置を定義する特定の CSS クラス名を設定するだけです。

画面の中央に要素を配置する方法がわからない場合は、この JSFiddleがその方法を示しています。要素をビューポートの中央に配置するだけですが、その方法を既に知っているように見えるため、新しい要素を生成しません。

必須CSS

.centralise {
  width: 200px; /* set dimension */
  height: 50px;
  position: fixed;
  top: 50%; /* move top left to screen centre */
  left: 50%;
  margin: -25px 0 0 -100px; /* offset by half element's size left and up */
  text-align: center; /* centralise text within element */
  line-height: 50px;
}

要素を上下 50% に配置する場合は、特定の寸法を指定する必要があるため、正確な負のマージンを設定して真ん中に配置できます。

固定寸法はありえませんか？

特定の要素の寸法を設定できない場合は、それmargin: 25% auto;を支援する必要があります。ただし、この場合、水平方向の真ん中にのみ配置されます。要素を上半分またはほぼ中央に配置しても、中央に配置されているように見えるため、垂直位置は通常それほど問題になりません。ドキュメントの内容によっては、中央よりも高くした方がよい場合もあります。

于 2013-01-14T10:01:16.350 に答える
0

yとして設定する必要があります(height of window / 2) - (height of element / 2)。

var y = $(window).height() /2 - $chart.outerHeight()/2;

また、CSS を確認してください。

position:absolute;

ライブデモ

于 2013-01-12T17:36:40.183 に答える
0

私のjsfiddleを参照してください。

親要素の中心だけを探している場合はheight()、親コンテナー内で要素を使用して追加するだけです。

var $parent = $('#parent');
var middle = $parent.height() / 2;
var $child = $(document.createElement('div'));
$child.attr("id", "child").text("hi")
   .css("position", "absolute")
   .css("top", middle - $child.height() / 2);
$parent.append($child);
于 2013-01-12T17:37:20.597 に答える