如何使用offsetWidth和offsetLeft将div动态居中放置在另一个div上

Question

我如何在left上设置div，以使其尽管宽度不同但总是在另一个div上方居中？

jsFiddle：http://jsfiddle.net/y04nse5x/

我正在尝试使每个标签在点上完全对齐，而无需使用容器。我敢肯定offsetWidth和offsetLeft可以做到，但我无法正确理解数学。

将点放置在页面上的任意位置，每个点都有一个mouseover事件侦听器，该事件侦听器将在该点上放置一个标签。我可以使用offsetLeft使标签显示在圆点上方，但它不会居中，因为标签的宽度可能会有所不同，这是因为不同的文本取决于它出现在哪个圆点上。

我遇到此问题的实际网站：http://briennakh.me/world-around-you/（悬停在右上角的菜单按钮上）

Answer 1

在CSS中，您正在设置说明的left。让我们看看left等于什么。 documentation

希望我的图有意义，因此：

var leftValue = this.offsetLeft-(description.offsetWidth-this.offsetWidth)/2;

Answer 2

您必须考虑描述宽度和按钮宽度。

这是一个小提琴：http://jsfiddle.net/khe8j2ms/

但是我可能会使用其他容器和样式：

left: 50%;
transform: translateX(-50%);