2

我有一个固定在视口底部的页脚。我正在使用 jQuery toggle 打开评论卡，供用户评论和提交：

$('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();
});

自然，如果我不向#comment-card 添加任何 CSS 选择器，它会显示在页脚下方，并且看不见。

所以我添加了：{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 宽，使用 -100px 作为你的 margin-left。当边距为负时，它会将 div 拉向该方向。由于它从屏幕上的 50% 开始，因此您只需将其拉到一半以使 div 在屏幕上居中。

于 2010-03-08T17:27:41.467 回答