Центр DIV, полноразмерный DIV по горизонтали и вертикали, используя jQuery - PullRequest
Новая
       35

Центр DIV, полноразмерный DIV по горизонтали и вертикали, используя jQuery

0 голосов
/ 25 сентября 2011

Следующий код творит чудеса, чтобы центрировать мой div до тех пор, пока в css нет отступов или 100% ширины: 

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;
}

$(element).center();

К сожалению, это портит мой отступ (ширина: 100%)разделить на последние версии Safari, Firefox и Chrome (возможно, все браузеры тоже).Заполнение слева исчезло, а заполнение справа все еще существует, но оно исчезло со страницы, создав полосу прокрутки.Есть предложения?

Демонстрация в реальном времени: http://www.pillerdesigns.com/

1 Ответ

1 голос
/ 25 сентября 2011

Когда я хочу центрировать что-то, я обычно делаю это: 

jQuery.fn.center = function () {

    this.css({
        position: 'absolute',
        top: 50+'%',
        left: 50+'%',
        marginTop: -(this.outerHeight()/2),
        marginLeft: -(this.outerWidth()/2)
    });

    return this;
}

В любом случае, у вас есть reset.css?Поскольку ваши проблемы зависят от браузера. 

$(element).center();

РЕДАКТИРОВАТЬ :

Добавить box-sizing: border-box; к вашему #content div css.

Проблема ввы используете заполнение для элемента шириной 100%.box-sizing метод будет работать во всех браузерах, но не в IE7 и ниже.

- ИЛИ -

Оберните ваш #content div внутри другого div, сделайте этот 100% и добавьтедополнение к внутреннему div.

...