Как динамически центрировать div над другим div, используя offsetWidth и offsetLeft

Question

Как установить left на div, чтобы он всегда отображался по центру над другим div, несмотря на изменение ширины?

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

Я стараюсь, чтобы каждая метка идеально совмещалась по точке, без необходимости контейнера. Я уверен, что это возможно с offsetWidth и offsetLeft, но я просто не могу понять математику правильно.

Точки размещаются в произвольных местах на странице, и у каждой точки есть прослушиватель событий mouseover, который будет размещать метку над точкой. Я могу заставить метку появляться над точкой, используя offsetLeft, но она не центрируется, потому что метка может отличаться по ширине из-за разного текста, который зависит от того, над какой точкой она появляется.

Мой реальный веб-сайт, где у меня возникла эта проблема: http://briennakh.me/world-around-you/ (наведите курсор на кнопки меню в правом верхнем углу)

Answer 1

Вы должны учитывать ширину описания и ширину кнопки.

Вот скрипка: http://jsfiddle.net/khe8j2ms/

Но я бы, вероятно, использовал дополнительный контейнер и стиль:

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

Answer 2

В вашем CSS вы устанавливаете left описания. Давайте посмотрим, чему равен left.

надеюсь, моя диаграмма имела смысл, таким образом:

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

http://jsfiddle.net/y04nse5x/1/