riix
7/24/2012 - 6:41 AM

객체를 부모 엘리먼트 중앙에 세로 정렬, vertical centering the matched elements

객체를 부모 엘리먼트 중앙에 세로 정렬, vertical centering the matched elements

//save this code as jquery.verticalAlign.js
(function ($) {

    $.fn.extend({

        verticalAlign: function () {

            //Iterate over the current set of matched elements
            return this.each(function () {

                var obj = $(this);

                // calculate the new padding and height
                var childHeight = obj.height();
                var parentHeight = obj.parent().height();
                var diff = Math.round(((parentHeight - childHeight) / 2));

                // apply new values
                obj.css({
                    "display": "block",
                    "margin-top": diff
                });

            });
        }
    });

})(jQuery);


//use like this:
$(document).ready(function ($) {

    $("#someDiv").verticalAlign();

});

//webkit browsers require window.load():
$(window).load(function ()) {

    $("#someDiv").verticalAlign();

});