Как центрировать DIV в точном центре страницы с помощью jQuery? - PullRequest
Новая
       29

Как центрировать DIV в точном центре страницы с помощью jQuery?

1 голос
/ 08 апреля 2010

Мне нужно центрировать DIV в точном центре страницы, используя jquery. Мой стиль CSS для DIV выглядит следующим образом: 

#page-content #center-box{
 position:absolute;
 width:400px;
 height:500px;
 background:#C0C0C0;
 border:1px solid #000;
 }

и мой jQuery для центрирования выглядит следующим образом: 

windowheight = $(window).height();
windowwidth = $(window).width();
pagecenterW = windowwidth/2;
pagecenterH = windowheight/2;
$("div#page-content div#center-box")
    .css({top: pagecenterH-250 + 'px', left: pagecenterW-200 + 'px'});

Этот код не вызывает никаких действий на моей странице при обновлении. Что я делаю не так?

Ответы [ 3 ]

4 голосов
/ 12 апреля 2010

Попробуйте это: Рабочий пример

Убедитесь, что у вас нет # стилей на # page-content, которые ограничивают центральную рамку, и попробуйте вставить свой код jquery в событие готовности документа. 

/*CSS*/
#center-box{
 position:absolute;
 width:400px;
 height:500px;
 background:#C0C0C0;
 border:1px solid #000;
 }

/*js*/
$(document).ready(function(){
  var windowheight = $(window).height();
  var windowwidth = $(window).width();
  var pagecenterW = windowwidth/2;
  var pagecenterH = windowheight/2;
  $("div#center-box")
      .css({top: pagecenterH-250 + 'px', left: pagecenterW-200 + 'px'});
});

/*html*/
<body>
  <div id="center-box">

  </div>
</body>
1 голос
/ 08 апреля 2010

Идентификатор начинается с удаления + 'px' или добавления круглых скобок вокруг pagecenterH-250 и pagecenterW-200.

То, что вы делаете, это int + int - string.

0 голосов
/ 06 мая 2012

При использовании абсолютного положение ящика не изменяется при изменении размера окна (например, от пейзажа к портрету).Вместо этого используйте исправлено.См. jQuery center элемент для просмотра окна с использованием центрального плагина для базового примера.

...