отрегулируйте дочернюю позицию по центру родителя в jquery - PullRequest
Новая
       8

отрегулируйте дочернюю позицию по центру родителя в jquery

0 голосов
/ 21 декабря 2010

Я создаю прототип навигации для сайта, который находится внизу окна. При наведении курсора на ссылку div появляется над навигацией с дополнительными ссылками, однако он не расположен в центре над навигационной ссылкой. Я пытался использовать css, чтобы расположить его на -50% влево, но это имело большой эффект [похоже, он сдвигается только на 50% от размера родителей], как мне это сделать с помощью jQuery?

Примечание: я также использую hoverIntent.

1 Ответ

0 голосов
/ 21 декабря 2010

Вместо этого поместите (исправьте) элемент контейнера шириной 1 пиксель, а затем сместите внутренний элемент (ваш фактический элемент) на половину его абсолютной ширины. Этот трюк сработал для меня.

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>

Граница в 1 пиксель на контейнере div просто показывает вам, где находится. Попробуйте и скажите мне, как это происходит.

Пример 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');
...