src/openseadragon.js
function( element ) {
            // Convert a possible ID to an actual HTMLElement
            element = $.getElement( element );

            /*
                CSS tables require you to have a display:table/row/cell hierarchy so we need to create
                three nested wrapper divs:
             */

            var wrappers = [
                $.makeNeutralElement( 'div' ),
                $.makeNeutralElement( 'div' ),
                $.makeNeutralElement( 'div' )
            ];

            // It feels like we should be able to pass style dicts to makeNeutralElement:
            $.extend(wrappers[0].style, {
                display: "table",
                height: "100%",
                width: "100%"
            });

            $.extend(wrappers[1].style, {
                display: "table-row"
            });

            $.extend(wrappers[2].style, {
                display: "table-cell",
                verticalAlign: "middle",
                textAlign: "center"
            });

            wrappers[0].appendChild(wrappers[1]);
            wrappers[1].appendChild(wrappers[2]);
            wrappers[2].appendChild(element);

            return wrappers[0];
        }
function( element ) {
            // Convert a possible ID to an actual HTMLElement
            element = $.getElement( element );

            /*
                CSS tables require you to have a display:table/row/cell hierarchy so we need to create
                three nested wrapper divs:
             */

            var wrappers = [
                $.makeNeutralElement( 'div' ),
                $.makeNeutralElement( 'div' ),
                $.makeNeutralElement( 'div' )
            ];

            // It feels like we should be able to pass style dicts to makeNeutralElement:
            $.extend(wrappers[0].style, {
                display: "table",
                height: "100%",
                width: "100%"
            });

            $.extend(wrappers[1].style, {
                display: "table-row"
            });

            $.extend(wrappers[2].style, {
                display: "table-cell",
                verticalAlign: "middle",
                textAlign: "center"
            });

            wrappers[0].appendChild(wrappers[1]);
            wrappers[1].appendChild(wrappers[2]);
            wrappers[2].appendChild(element);

            return wrappers[0];
        }
function ( element ) { // Convert a possible ID to an actual HTMLElement element = $ . getElement ( element ) ; /*
                CSS tables require you to have a display:table/row/cell hierarchy so we need to create
                three nested wrapper divs:
             */ var wrappers = [ $ . makeNeutralElement ( 'div' ) , $ . makeNeutralElement ( 'div' ) , $ . makeNeutralElement ( 'div' ) ] ; // It feels like we should be able to pass style dicts to makeNeutralElement: $ . extend ( wrappers [ 0 ] . style , { display : "table" , height : "100%" , width : "100%" } ) ; $ . extend ( wrappers [ 1 ] . style , { display : "table-row" } ) ; $ . extend ( wrappers [ 2 ] . style , { display : "table-cell" , verticalAlign : "middle" , textAlign : "center" } ) ; wrappers [ 0 ] . appendChild ( wrappers [ 1 ] ) ; wrappers [ 1 ] . appendChild ( wrappers [ 2 ] ) ; wrappers [ 2 ] . appendChild ( element ) ; return wrappers [ 0 ] ; }
Wraps the given element in a nest of divs so that the element can
be easily centered using CSS tables
@function
@param {Element|String} element
@returns {Element} outermost wrapper element
Wraps the given element in a nest of divs so that the element can be easily centered using CSS tables