Html 如何以模型内容为中心

我有一个模态对话框，下面是谁的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在modal div中居中。我在modal div中没有文本

.text-center{
    text-align: center;
    margin: 0 auto;
}

除此之外：

<div class="span7 center"> box </div>

框

。img responsive应用了以下样式：

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

display:block

表示继承自

text center

的

text align:center

无效

如果删除

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

我非常确定

img responsive

应用了一些可能会影响对齐的宽度样式…您有什么建议吗？好的，我会为您添加一个答案…Thx，您知道使用现有引导css的方法吗？顺便说一句-img仍然在左侧。见我的澄清。thxIt确实有效，我只是在JSFIDLE中测试了它。是的，请参阅我对引导css方式的编辑，我没有，我复制了您的verbatum并在chrome中进行了测试，img在modaltry的左侧齐平，向上面两个添加了一个重要标志，并查看发生了什么，如果它们工作，则是因为已经应用了样式。

<div class="span7 center"> box </div>

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

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