Question

我有一个固定在视口底部的页脚。我正在使用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高的页脚之上。

问题是，我不能让它在视口中居......如果我使用像素，取决于分辨率，它要么是向左或向右太远......我如何在视口中居中？ / p>

Answer 1

要将绝对定位的元素居中，请将其CSS设置为：

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

margin-left应该是你居中的div的宽度的1/2，所以如果div是200px宽，则使用-100px作为你的margin-left。当保证金为负时，它会向该方向拉动div。由于它在整个屏幕上以50％的比例开始，因此您只想将其拉到一半以使屏幕上的div居中。

通过jQuery中心DIV

1 个答案: