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