在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');