联系表不会在父 div 中居中

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

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

Contact Form won't center within parent div

html

css

forms

center