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

Question

我正在为位于窗口底部的网站设计导航原型。当我将鼠标悬停在一个链接上时，一个 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');