Question

我无法让我的表格在div的中心对齐。让我疯了！

无论视口大小如何，我都只需要将此联系表单置于中心位置。现在它已经离开了，但我无法弄明白。我已经添加了一个codePen here

表单（和父容器）的html如下所示。任何反馈都是有帮助的！谢谢

<section id="contact" class="contact">
            <div class="container">
                <div class="row mb50">

                    <div class="sec-title text-center mb50 wow fadeInDown animated" data-wow-duration="500ms">
                        <h2>Get in touch</h2>
                        <div class="devider"><i class="fa fa-heart-o fa-lg"></i></div>
                    </div>

                    <div class="sec-sub-title text-center wow rubberBand animated" data-wow-duration="1000ms">
                        <p>We welcome any question or comment you have - Expect a reply within 24 hours.</p>
                    </div>

                    <!-- Contact Form -->

                    <div id="contactbox">
                    <div id="contactholder">
                    <div class="col-lg-8 col-md-8 col-sm-7 col-xs-12 wow fadeInDown animated" data-wow-duration="500ms" data-wow-delay="300ms">
                        <div class="contact-form">

                            <form action="#" id="contact-form">
                                <div class="input-group name-email">
                                    <div class="input-field">
                                        <input type="text" name="name" id="name" placeholder="Name" class="form-control">
                                    </div>
                                    <div class="input-field">
                                        <input type="email" name="email1" id="email1" placeholder="Email" class="form-control">
                                    </div>
                                </div>
                                <div class="input-group">
                                    <textarea name="message" id="message" placeholder="Message" class="form-control"></textarea>
                                </div>
                                <div class="input-group">
                                    <input type="submit" id="form-submit" class="pull-right" value="Send message">
                                </div>
                            </form>
                          </div>
                       </div>
                      </div>
                    </div>

                    <!-- end contact form -->

              </div>
           </div>

        </section>

Answer 1

您将Bootstrap网格布局与自定义内容混合在一起。这是令人头疼的食谱。始终使用网格进行布局，并将边距和填充仅应用于布局中最里面网格框内的元素。

删除自定义宽度并使用 Bootstrap's grid offsets 按照自然意图处理事情：

<div class="col-xs-12 col-md-8 col-md-offset-2 ...

<强> Demo

我删除了所有这些，只与Bootstrap战斗：

#contactbox{
    width:60%;
}
#contactholder{
    width:1000px;
}

Answer 2

您的contactBox上的宽度很好，我喜欢这样做：

添加col-centered类

<div class="col-centered col-lg-8 col-md-8 col-sm-7 col-xs-12 wow fadeInDown animated" data-wow-duration="500ms" data-wow-delay="300ms">
  ...
</div>

风格：

.col-centered{
  margin: 0 auto !important;
  float: none !important;
}

联系表格不会在父级div中居中

2 个答案: