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

=========更新后的答案==========

我确实看到链接中的图像出现在div容器之外，这里需要做些什么才能解决这个问题。忘记之前提供的所有代码，让我们重新开始。给position:relative; .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 */ }

的样式来创建居中的登录图像

{{1}}

<强> Here's an example

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

2 个答案: