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

  <!-- modal popup dialog-->
   <div style="text-align: center;" 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>

修改

<body class="container"> <div class="col-lg-1 col-offset-6 centered"> <img id="image-gallery-image" class="img-responsive" src="" /> </div> </body>

<强> EDIT2： “Bootstrap的跨度向左浮动。只需将它们置于中心位置即可覆盖此行为。”
像这样：

.center { float: none; margin-left: auto; margin-right: auto; }

而不是：

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

Answer 2

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

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

display:block表示继承自text-align:centre的{{1}}无效。

如果您移除text-center课程，您的图片将会居中。

.img-responsive

Answer 3

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

如何集中模型内容

3 个答案: