Как я могу центрировать div в середине страницы, используя jQuery, и сохранять его по центру при изменении размера окна? - PullRequest
Новая
       7

Как я могу центрировать div в середине страницы, используя jQuery, и сохранять его по центру при изменении размера окна?

2 голосов
/ 22 июля 2011

Кто-нибудь знает какой-нибудь скрипт jQuery, который будет держать div по центру в середине, а когда окно будет изменено, оно также будет держать его по центру?Я строю плагин лайтбокса, и мне нужно, чтобы он оставался посередине.Я пытался использовать CSS, но это не работает.

Также мне нужно, чтобы он оставался посередине, когда открыта другая коробка, которая имеет большую ширину и высоту.Вот страница с примерами:

http://wowbox.yolasite.com/

Сначала откройте изображение, а затем откройте div, и вы поймете, что я имею в виду.Div не по центру.Но затем, когда вы закрываете и снова открываете div, он центрируется из-за .center (), который происходит, когда вы нажимаете на ссылку WowBox.Мне просто нужно, чтобы он всегда был по центру, и никогда не путался таким образом.

Вот код, который я сейчас использую для его центрирования: 

  jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop() + "px");
    this.css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");
    return this;
  }

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

Может ли кто-нибудь помочь с этим?

Заранее спасибо,

Натан

Ответы [ 3 ]

4 голосов
/ 22 июля 2011

Попробуйте это вместе с примером кода, который у вас уже есть.Для уточнения: 

jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop() + "px");
    this.css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");
    return this;
}

$(document).ready(function(){
   $('.element').center();
   window.onresize = function(event) {
        $('.element').center();
    }
});
1 голос
/ 22 июля 2011

----------------- Это работает ---------------------

CSS 

       .box{
    width:200px;
    top:-5px; 

    position:relative;
    background:#444;
}
.inner {
    height:0px;
    width:0px;
    background:#444;
    top:50%;
    left:50%;
    right:50%;
    bottom:50%;
    position:relative;
}

.outer {height: 200px;ширина: 400px;граница: 2px пунктирная красная;}

HTML 

<div class="outer">
<div class="inner">
    <div class="box">
        wpfw efuiweh fuiwehf weuifh weuifh fuihwe fuihwefuiweh uwehf iuwehf uiwefhweuifh weuifhwe fuiweh fuiwehfuiwefh uiwefh weuifh weuifh weuifhwe uifh weuifhwefuiweh fuiweh fuiwehf iweufh weuih
    </div>
</div>
</div>

jQuery 

$(function(){
    $(".box").css('top',-($(".box").height()/2));
    $(".box").css('left',-($(".box").width()/2));
});

Пожалуйста, дайте мне знать, если вы этого не хотите.На http://jsfiddle.net/mazlix/m4Ttk/2/ вы даже можете видеть, что изменение размера внутреннего внешнего элемента будет сохранять его центрированным.

0 голосов
/ 22 июля 2011

для примера с фиксированным размером http://jsfiddle.net/expert/vh2vy/5/

...