2

ビューポートの下部に固定されているフッターがあります。jQueryトグルを使用して、ユーザーがコメントして送信できるコメントカードを開きます。

$('a#footer-comment').click(function() {
  $("#comment-card").toggle(300);
  return false;
  $('#comment-card').show({ position:);
});

$('a#footer-comment-hide').click(function() {
  $("#comment-card").toggle(300);
  return false;
  $('#comment-card').hide();
});

当然、CSSセレクターを＃comment-cardに追加しないと、フッターの下に表示され、見えなくなります。

だから私は追加しました：{position:absolute; bottom:30px; left:auto;} 30pxなので、高さ30pxのフッターの上に表示されます。

問題は、これをビューポートの中央に配置できないことです...ピクセルを使用する場合、解像度に応じて、左または右に遠すぎます...これをビューポートの中央に配置するにはどうすればよいですか？

4

1 に答える 1

2

絶対位置の要素を中央に配置するには、CSSを次のように設定します。

left:50%;
margin-left:-100px;
position:absolute;
bottom:30px;

margin-leftは、中央に配置するdivの幅の1/2である必要があるため、divの幅が200pxの場合は、margin-leftに-100pxを使用します。マージンが負の場合、divをその方向に引っ張ります。画面全体の50％から始まるので、画面の中央にdivを配置するために半分だけ引っ張る必要があります。

于 2010-03-08T17:27:41.467 に答える