jquery - div jqueryを動的に整列

Question

次のオプションに合わせて、ボックスを作成する関数を作成しようとしていました

1. $("#roundbox").divAlign({vertical:"top",horizontal:"left"});- 親の左上にボックスを作成する必要があります。

2. $("#roundbox").divAlign({vertical:"top",horizontal:"center"});- 親の上部中央にボックスを作成する必要があります。

3. $("#roundbox").divAlign({vertical:"top",horizontal:"right"});- 親の右上にボックスを作成する必要があります。

4. $("#roundbox").divAlign({vertical:"center",horizontal:"left"});

5. $("#roundbox").divAlign({vertical:"center",horizontal:"center"});・画面中央

6. $("#roundbox").divAlign({vertical:"center",horizontal:"right"});- 中央だが右側

以下で行ったのとは異なり、より少ないコードで達成する方法を教えてください。

(function($){
     $.fn.extend({
          divalign: function (options) {
               var options =  $.extend({ // Default values
                    inside:window, // element, center into window
                    vertical:'center',
                    horizontal:'center'
               }, options);
               return this.each(function() {
                        var props = {position:'absolute'};
                        if (options.vertical=="center" && options.horizontal=="center"){
                            var div_height = $(options.inside).height() / 2;
                            var div_width = $(options.inside).width() / 2;
                            $.extend(props, {top:'50%'},{left: '50%'},{'margin-top': div_height + 'px'},{'margin-left': div_width+'px'});
                        }else if(options.vertical=="top" && options.horizontal=="left"){
                            $.extend(props, {'margin-top':'5%'},{left: '2%'});
                        }
                    $(this).css(props);
                    return $(this);
               });
          }
     }); })(jQuery);

視覚的表現:

ありがとう。