主体中的Bootstrap模态对话框中心图像

Question

我试图在一个模态对话框体中居中一个图像(水平和垂直).我已经尝试了所有我知道的每一种排列.top/left = 50%,margin 0 auto,class = center-block ...通读bootstrap文档,我很难过.这是我的HTML ...任何帮助将不胜感激

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

编辑:谢谢Chun的回复,但没有达到预期的效果.这是一个2图像的链接.一个是Chun的建议的结果,另一个是操纵的图像来展示我想要的结果. https://www.dropbox.com/sh/kj2no3ovgivjjt8/AAAarW9SjuBjYMWZPCUaKebua?dl=0

Answer 1

这将使图像居中于模态中心.

.modal-body > .img-responsive {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Answer 2

它必须通过添加更多类来工作:

<style>
  .img-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
</style>

Answer 3

========== 更新答案 ==========

我确实看到您的链接中的图像超出了您的 div 容器，这是解决此问题需要做的事情。忘记之前提供的所有代码，让我们重新开始。给出一个position:relative;to.modal-body将避免走出容器的形象，这是一个例子：

.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??" */
}

然后，通过为类设置样式来创建居中的登录图像 .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 */
}

这是一个例子