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的回复，但是它没有达到预期的结果。 这里有两张图片的链接。一张是Chun建议的结果，另一张是一个经过处理的图片，展示了我想要的结果。 https://www.dropbox.com/sh/kj2no3ovgivjjt8/AAAarW9SjuBjYMWZPCUaKebua?dl=0

- Trenton

Answer 1

这将使图像在模态框中居中显示。

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

- user5124826

---

无法运行。但是通过添加一个类可以使其工作：.img-center { display: block; margin-left: auto; margin-right: auto; - Sulung Nugroho

这完全在 Bootstrap 模态框主体中工作。 - always-a-learner

Answer 2

必须通过添加更多的类来使其工作：

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

- Sulung Nugroho

---

很高兴看到答案中包含了<script>标签，真的很“优雅” :) - Floggedhorse

Answer 3

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

我看到你链接中的图片超出了你的

容器，以下是需要执行的步骤来解决这个问题。请忘记之前提供的所有代码，让我们重新开始。给.modal-body添加position:relative;将避免图像超出容器范围，以下是示例：

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

这里是一个例子。

- Chun

---

谢谢，但这还没有完全解决我的问题。这里是屏幕截图的链接：https://www.dropbox.com/sh/kj2no3ovgivjjt8/AAAarW9SjuBjYMWZPCUaKebua?dl=0 - Trenton

完美地工作了。谢谢。 - Trenton

我建议不要覆盖 Bootstrap 类，而是继承它们的属性...例如：.img-resp-my { .img-responsive; [!在此添加您的自定义 CSS！]; } .modal-body-my { .modal-body; [!在此添加您的自定义 CSS！]; }。 - Eduardo Lucio

更正：要使用最后一条评论中提到的语法，您需要一个名为LESS（http://lesscss.org/）的库。 - Eduardo Lucio

Answer 4

为了解决这个问题，只需添加Bootstrap的img-fluid类即可。

因此，代码将如下所示，

<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-fluid" />
            </div>
        </div>
    </div>
</div>

- Chandni Soni