jquery - 在 jquery 中将子位置调整到父的中心

Question

我正在为位于窗口底部的站点设计导航原型(prototype)。当我将鼠标悬停在一个链接上时，一个 div 会出现在带有子链接的导航上方，但它不会位于导航中悬停链接的中央。我试过使用 css 将它定位在 -50% 左侧，但这产生了很大的影响 [看起来它只向父尺寸左侧移动 50%]，我如何使用 jQuery 做到这一点？

注意:我也在使用 hoverIntent。

Answer 1

改为(固定)放置一个 1 像素宽的容器 div，然后将内部元素(您的实际元素)偏移其绝对宽度的一半。这个技巧对我有用。

HTML:

  <style type="text/css">
    #testnav-container {
      position:fixed;
      bottom:0;
      left:50%;
      width:1px;
      border:1px solid red;
      text-align:center;
    }
    #testnav {
      height:20px;
      width:100px;
      background:blue;
      margin-left:-50px;
    }
  </style>
  <div id="testnav-container">
    <div id="testnav">test navigation bar</div>
  </div>

容器 div 上的 1px 边框只是为了告诉你它在哪里。试试看，然后告诉我效果如何。

要在控制台中运行的代码片段 jQuery 示例:

var foo = $('<div style="position:fixed;bottom:0;left:50%;width:1px;border:1px solid red;text-align:center;"><div style="height:20px;width:100px;background:blue;margin-left:-50px">test navigation bar</div></div>').appendTo('body');