正文中的 Bootstrap 模态对话框中心图像 [英] Bootstrap modal dialog center image in body

问题描述

我试图将图像(水平和垂直)居中放置在模态对话框正文中.我已经尝试了我所知道的一切.top/left = 50%, margin 0 auto, class=center-block ... 通读 bootstrap 文档，我被难住了.这是我的 html... 任何帮助将不胜感激

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

谢谢春的回应，但没有达到预期的效果.这是2张图片的链接.一个是 Chun 建议的结果，另一个是经过处理的图像以展示我想要的结果.https://www.dropbox.com/sh/kj2no3ovgivjjt8/AAAarW9SjuBjYMWZPCUa=0

解决方案

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

我确实看到您链接中的图片超出了您的 div 容器，以下是解决此问题需要采取的措施.忘记之前提供的所有代码，让我们重新开始.给 position:relative; 赋予 .modal-body 将避免图像超出容器，这是一个例子:

.modal-body {位置:相对；/* 这避免了它里面的任何东西离开容器 */高度:250px；/* 假设您的登录框高度为 250px .需要添加这个高度，否则 .img-responsive 会像哦，不，我需要垂直对齐?！但是我需要从哪个值对齐??"*/}

然后，通过为 .img-responsive

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

.img-responsive {宽度:50px；/* 这个值将取决于你想要加载图像的大小，假设它是 50px */高度:50px；位置:绝对；左:50%；顶部:50%；边距顶部:-25px；/* 这需要是高度的一半 */左边距:-25px；/* 这需要是宽度的一半 */}

这是一个例子

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

解决方案

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

这篇关于正文中的 Bootstrap 模态对话框中心图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！