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 用于此解决方案（评论），但您不知道任何其他替代方案。所以我提议一个。

替代方法 - 使用 CSS

您可以使用 CSS 代替使用 Javascript 来定位您的元素，并将您的元素定位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 回答