IE7 autoWidth fails to center block element

[DimitarChristoff]

Basically, the collection of divs that comprise the modal body fails to wrap width to the content width (eg, an image) as the autoWidth class relies on display: inline-block on the main modal div.

Instead, in IE7, it extends all the width of the browser.

markup:

 template: ['<table class="modal" style="position: fixed; top: 0; left: -100%; width: 100%; height: 100%;">',
                '<tbody style="height: 100%;">',
                    '<tr style="height: 100%;">',
                        '<td style="vertical-align: middle; height: 100%; text-align: center">',
                            '<div class="modal-box boxShadow clearfix" style="position: relative; margin: 0 auto;">',
                                '<span class="modal-close"></span>',
                                '<div class="modal-header"></div>',
                                '<div class="modal-content" style="overflow: auto;">',
                                    '<div class="modal-body"></div>',
                                '</div>',
                                '<div class="modal-footer"></div>',
                            '</div>',
                        '</td>',
                    '</tr>',
                '</tbody>',
            '</table>'].join(""),

.modal-box {
    min-width: 250px;
    width: 70%;
    max-width: 750px;
    border: 1px solid;
    border-color: #afafaf #a0a0a0 #909090;
    border-radius: 6px;
    margin-top: 30px;
    opacity: 0;
    left: 100%;
    visibility: hidden;
    text-align: left;
}

.autoWidth {
    width: auto;
    max-width: none;
    display: inline-block;
}

[DimitarChristoff]

all standard ways of centering content have failed the spec test of showing the image from the demo.

tried: float left + relative + left 50% outer and float right left -50% inner, the standard text-align: center outer and text-align: left; inner + display: inline. nothing seems to work.