居中包含联系表单的div [英] Center a div that contains a contact form

问题描述

如何确定位于div内的联络表单的中心位置。我尝试了 margin：0 auto; ，但没有工作。

How do I center a contact form which is inside a div. I have tried margin:0 auto; and it didn't work.

<div id="new_div_3">
        <form class="contact_form" action="#" method="post" name="contact_form">
            <ul>
                <li>
                    <h2>Contact Us</h2>
                    <span class="required_notification">* Denotes Required Field</span>
                </li>
                <li>
                    <label for="name">Name:</label>
                    <input type="text"  placeholder="John Doe" required />
                </li>
                <li>
                    <label for="email">Email:</label>
                    <input type="email" name="email" placeholder="[e-mail]" required />
                    <span class="form_hint">Proper format "[e-mail]"</span>
                </li>
                <li>
                    <label for="website">Website:</label>
                    <input type="url" name="website" placeholder="http://johndoe.com" required pattern="(http|https)://.+"/>
                    <span class="form_hint">Proper format "http://someaddress.com"</span>
                </li>
                <li>
                    <label for="message">Message:</label>
                    <textarea name="message" cols="40" rows="6" required ></textarea>
                </li>
                <li>
                    <button class="submit" type="submit">Submit Form</button>
                </li>
            </ul>
        </form>
    </div>

我已经尝试过使用各种方法，没有一个似乎工作在div的中心。我甚至尝试集中触点形式本身，它只是将输入字段移动到联系人窗体的中心，而不是div。

I have tried using various methods and none of them seem to work to center the div. I even tried centering the contact form itself and it just moved the input fields to the center of the contact form, rather than the div.

推荐答案

为了获得 margin：0 auto; ，您需要设置宽度。

In order to get margin: 0 auto; work you need to set width.

#new_div_3 {
    width: 500px;
    margin: 0 auto;
}

检查小提琴：
http://jsfiddle.net/9cMAC/

这篇关于居中包含联系表单的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！