вертикальное выравнивание div внутри div с использованием jquery? - PullRequest
Новая
       16

вертикальное выравнивание div внутри div с использованием jquery?

7 голосов
/ 08 июня 2009

Кто-нибудь имеет опыт работы с плагинами jquery vAligh или аналогичными?

Я пытался выполнить выравнивание для следующего, но это не удалось .. Я использовал простой плагин valign (я добавлю плагин в конце, его расширение jquery), если кто-то может помочь, это будет очень полезно ... 

var overlayLayer = $("<div id='office-location'></div>").addClass('modal-overlay');
$('body').append(overlayLayer);

$('<div id="content-for-overlay" style="background-color: white;"></div>').appendTo(overlayLayer);

this.render({ to: "content-for-overlay", partial: "office-location-modal" }); // this just copies html into the layer

$('#content-for-overlay').vAlign(); THIS USES a plugin called valign but it doesn't align

$("body").css("overflow", "hidden");
$('#office-location').css("opacity", 0.8).fadeIn(150);
$('#content-for-overlay').css("opacity", 1);

вот расширение FN .. 

(function($) {
$.fn.vAlign = function() {
    return this.each(function(i) {
        var h = $(this).height();
        var oh = $(this).outerHeight();
        var mt = (h + (oh - h)) / 2;
        $(this).css("margin-top", "-" + mt + "px");
        $(this).css("top", "50%");
        $(this).css("position", "absolute");
    });
};

}) (Jquery);

1 Ответ

6 голосов
/ 08 июня 2009

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

Было бы довольно легко применить этот CSS к разметке, используя jQuery, используя $().css()

...