CSS 正文中的 Bootstrap 模态对话框中心图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29334416/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap modal dialog center image in body
提问by Trenton
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
我试图在模式对话框正文中居中图像（水平和垂直）。我已经尝试了我所知道的一切。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>
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
编辑：感谢春的回应，但没有达到预期的效果。这是2张图片的链接。一个是 Chun 建议的结果，另一个是经过处理的图像以展示我想要的结果。 https://www.dropbox.com/sh/kj2no3ovgivjjt8/AAAarW9SjuBjYMWZPCUaKebua?dl=0
采纳答案by Chun
========= 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-bodywill avoid the image of going outside of the container, here's an example:
我确实看到您的链接中的图像超出了您的 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??" */
}
Then, create your centered login image by styling the class .img-responsive
然后，通过为类设置样式来创建居中的登录图像 .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 */
}
回答by
This will center the image inside of the modal.
这将使模态内的图像居中。
.modal-body > .img-responsive {
display: block;
margin-left: auto;
margin-right: auto;
}
回答by Sulung Nugroho
It must be working by adding more class :
它必须通过添加更多类来工作：
<style>
.img-center {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
