0

如何将 div 内的联系表单居中。我试过margin:0 auto;了，但没有用。

<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="john_doe@example.com" required />
                    <span class="form_hint">Proper format "name@something.com"</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。

4

3 回答 3

2

为了得到margin: 0 auto;工作，你需要设置宽度。

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

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

于 2013-09-08T13:04:09.363 回答
0 
#new_div_3 {
    width:100%;
    display:block;
    margin:auto;
}

应该是你所需要的。

于 2013-09-08T13:00:02.800 回答
0

干得好：

#new_div_3 {
margin: 0 auto;
position: relative;
width: 60%;

}

检查小提琴

于 2013-09-08T13:15:45.013 回答