Trenton Trenton - 6 months ago 63
CSS Question

Bootstrap modal dialog center image in body

I am trying to center an image (both horizontally and vertically) in a modal dialog body. I have tried every permutation of everything I know. top / left = 50%, margin 0 auto, class=center-block... Read through the bootstrap documentation and I am stumped. Here is my html... Any help would be greatly appreciated

<div id="processing" class="modal fade">
<div class="modal-dialog" style="max-width: 350px">
<div class="modal-content">
<div class="panel-heading modal-header dialog-header">
<h4 class="modal-title">Please Wait...</h4>
</div>
<div class="modal-body" style="height: 230px;">
<img src="~/images/ajax-loader.gif" class="img-responsive" />
</div>
</div>
</div>
</div>


EDIT:
Thank you Chun for the response, but it did not achieve the desired results.
Here is a link to 2 images. One is the result from Chun's suggestion, the other is a manipulated image to exhibit my desired result.
https://www.dropbox.com/sh/kj2no3ovgivjjt8/AAAarW9SjuBjYMWZPCUaKebua?dl=0

Answer

========= Updated Answer ==========

I did see the image from your link going outside of your div container, here's what needs to be done in order to fix this problem. Forget all the code provided previously, let's start over. Giving a position:relative; to .modal-body will avoid the image of going outside of the container, here's an example:

.modal-body {
    position:relative; /* This avoids whatever it's absolute inside of it to go off the container */
    height: 250px; /* let's imagine that your login box height is 250px . This height needs to be added, otherwise .img-responsive will be like "Oh no, I need to be vertically aligned?! but from which value I need to be aligned??" */
}

Then, create your centered login image by styling the class .img-responsive

.img-responsive {
    width:50px; /* This value will depend on what size you want for your loading image, let's say it's 50px */
    height: 50px;
    position:absolute;
    left:50%;
    top:50%;
    margin-top:-25px; /* This needs to be half of the height */
    margin-left:-25px; /* This needs to be half of the width */
}

Here's an example