Question

嗨我有Bootstrap模态。我没有得到垂直中心对齐的锄头？

＆＃13;

 $('#sectionAjaxLoader').modal('show');

＆＃13;

  <section class="modal" id="sectionAjaxLoader" data-keyboard="false" data-backdrop="static">
        <img src='../../Images/ajax_loader.gif' alt="Please Wait..." />
    </section>

＆＃13;

有任何想法如何实现这个？

Answer 1

像这样使用

.modal {
    text-align: center;
}
.modal:before {
    display: inline-block;
    vertical-align: middle;
    content: " ";
    height: 100%;
}
.modal-dialog {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
}

工作小提琴

http://jsfiddle.net/52VtD/9057/

Answer 2

仅限css

.modal {
        }
        .vertical-alignment-helper {
            display:table;
            height: 100%;
            width: 100%;
        }
        .vertical-align-center {
            /* To center vertically */
            display: table-cell;
            vertical-align: middle;
        }
        .modal-content {
            /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
            width:inherit;
            height:inherit;
            /* To center horizontally */
            margin: 0 auto;
        }

演示：See，另一个演示：See

如何以垂直中心对齐的方式放置Bootstrap模态？

2 个答案: