如何以垂直居中对齐的方式放置引导带模态? [英] How to place Boot strap modal in vertically center aligned manner?

问题描述

我有Bootstrap模态. 我不愿意使垂直居中对齐吗?

Hi I have Bootstrap modal. I am not getting hoe to make vertically center aligned?

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

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

有什么想法要实现吗?

推荐答案

像这样使用

.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/

这篇关于如何以垂直居中对齐的方式放置引导带模态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！