联系表格不会在父 div 中居中答案

【问题标题】：Contact Form won't center within parent div联系表格不会在父 div 中居中
【发布时间】：2015-02-20 18:31:12
【问题描述】：

我的表单无法在 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>

【问题讨论】：

标签： html css forms center

【解决方案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;
}

【讨论】：

完美的解决方案和有用的解释。顶尖！谢谢

【解决方案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;
}

【讨论】：

感谢您的反馈，其他帖子解决了这个问题，但这似乎也有效。