html - 如何居中模型内容

Question

我有一个模态对话框，它的 html 在下面。显示的图片应该居中，但我似乎无法居中。

谁有解决办法？

       <!-- modal popup dialog-->
       <div class="modal fade centered" id="image-gallery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog centered">
                <div class="modal-content siteImageButton">
                    <div class="modal-body text-center">
                        <img id="image-gallery-image" class="img-responsive" src="" />
                    </div>
                </div>
            </div>
        </div>

澄清:我希望 img 在模态 div 中居中。我在模态 div 中没有文本。

Answer 1

.img-responsive 应用了以下样式:

display: block;
max-width: 100%;
height: auto;

display:block 表示继承自 text-center 的 text-align:centre 将无效。

如果您删除 .img-responsive 类，您的图像将居中。

<div class="modal fade centered" id="image-gallery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog centered">
        <div class="modal-content siteImageButton">
            <div class="modal-body text-center">
                <img id="image-gallery-image" src="" />
            </div>
        </div>
    </div>
</div>