0

ここでhttp://jsfiddle.net/rKejG/8/を見ることができるように、divをマーカーに対して水平方向に中央に配置しようとしていますが、本来よりも少し右側にあります。

これは私のコードです

$("#infobox").css({
    marginLeft: (parseInt($("#content").width(), 10) / 2) - (parseInt($("#infobox").width(), 10) / 2) + 'px'
});

content次に、おそらくandの半分を追加infoboxして負のマージンに入れる必要があることに気付きましたが、それによりさらに悪化しました。

$("#infobox").css({
    marginLeft: '-' + (parseInt($("#content").width(), 10) / 2) + (parseInt($("#infobox").width(), 10) / 2) + 'px'
});

Result: margin-left: -16110.5px

ここで何が間違っていますか？ありがとう！

4

2 に答える 2

1

HTMLをクリーンアップし、markerクラスをに設定しましたposition: relative。それで問題は解決したようです。また、余分なパディングを削除し、マーカークラスの追加のマージンを削除しました。私はcssで他のいくつかの変更を行ったと思います、あなたはオリジナルを比較する必要があります。クリーンアップするのにかなりの時間がありました。

フィドル

更新：ここに戻ると、絶対的に配置された要素の親に対する相対的な位置は良い習慣ですが、必須ではなく、これを修正したものではありません。インフォボックスクラスの余分なパディングとコンテンツクラスの静的マージン、およびネストされていないhtmlが問題を修正しました。

[更新][更新]

あなたが持っているものに基づいて、cssでラッパーが必要だと思います。次に、このフィドルに示すようwidth:100%; padding-top:45%; position:relativeに子divを設定します。http ：//jsfiddle.net/bfelda/rKejG/22/ コンテナの上部のパディングを次のように設定できます。もちろんあなたが望むものになりなさい。しかし、私は要点を見逃しているかもしれません。マーカーの位置に関係なく、テキストをマーカーの中央に配置しますか？margin: 0 auto

于 2013-02-06T22:07:53.643 に答える
1

これを試してみてください。スクリプトを少し変更しましたが、正しい結果が得られます。

http://jsfiddle.net/rKejG/15/

JS コード:

   //for vertical center position
   var top = +$("#content").offset().top + +$("#content").height();
   $("#infobox").css("top", top);


   //for horizontal center position
   var left = +$("#content").offset().left - +$("#infobox").width()/2;
   $("#infobox").css("left", left);

HTML:

  <div id="content" class="marker"></div>
  <div id="infobox" class="infobox">BEER PALACE Restaurant & Pub</div>

「infobox」div の位置合わせにマージンを使用している理由がわからなかったので、絶対配置を使用しました。これは、「コンテンツ」div がページのどこに配置されていても機能するはずです。

また、「infobox」div を「content」div に追加した理由もわかりませんでした。これがイベントの後に「infobox」を表示することになっている場合 (あなたの命名に基づいて私が仮定したことです)、あなたはおそらく子供ではなく、兄弟であることを望んでいます。もちろん、この仮定が間違っている場合はお知らせください。いつでもフィドルを変更できます。

于 2013-02-06T22:08:29.303 に答える