[FIXED] How to place Boot strap modal in vertically center aligned manner?

Issue

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>

Any ideas how to implement this?

Solution

Use like this

.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;
}

Working fiddle

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

Answered By - Miomir Dancevic

Answer Checked By - Cary Denson (PHPFixing Admin)