引导列中的图像未按预期呈现

Question

我正在使用个人网站的bootstrap主题。在联系部分，我试图用我住的地方的图像替换一个表单（主题附带）。

问题是图像不会在页面中心呈现（表单确实如此）：

以下是表单的HTML：

            <div class="row">

            <div class="col-sm-6 col-sm-offset-3">

                <form id="contact-form" role="form">
                    <div class="ajax-hidden">
                        <div class="form-group wow fadeInUp">
                            <label class="sr-only" for="c_name">Name</label>
                            <input type="text" id="c_name" class="form-control" name="c_name" placeholder="Name">
                        </div>

                        <div class="form-group wow fadeInUp" data-wow-delay=".1s">
                            <label class="sr-only" for="c_email">Email</label>
                            <input type="email" id="c_email" class="form-control" name="c_email" placeholder="E-mail">
                        </div>

                        <div class="form-group wow fadeInUp" data-wow-delay=".2s">
                            <textarea class="form-control" id="c_message" name="c_message" rows="7" placeholder="Message"></textarea>
                        </div>

                        <button type="submit" class="btn btn-lg btn-block wow fadeInUp" data-wow-delay=".3s">Send Message</button>
                    </div>
                    <div class="ajax-response"></div>
                </form>

            </div>

        </div><!-- .row -->

Chrome开发工具中的表单：

以下是我的代码的外观：

            <div class="row">

                <div class="col-sm-6 col-sm-offset-3">
                    <img src="assets/images/staticmap2.png">
                </div>

            </div><!-- .row -->

Chrome开发工具中的图片：

我尝试过更改图像的大小和不同的偏移大小无济于事。我不知道怎么解决这个问题 - 任何人都可以帮忙吗？

Answer 1

将类center-block添加到您的图片将会应用margin:0 auto;并将图片置于其父级div中。

<img class="center-block" src="assets/images/staticmap2.png">