html - 在 div 中居中表单

Question

我在 div 中有一个简单的联系表单，但我无法将其置于 div 的中心。我试过边距、填充、文本对齐:居中，但都不起作用。

html: http://www.joekellywebdesign.com/churchsample/contact.html

<div id="contactbottomright">
        <h2>Contact Form</h2>

    <form action="feedback.php" method="post">
        <table border="0" cellpadding="8" cellspacing="8">
            <tr>
                <td>
                    <label for="tswname">Name</label>:</td>
                <td>
                    <input type="text" name="fullname" id="tswname" size="25" />
                </td>
            </tr>
            <tr>
                <td>
                    <label for="tswemail">Email address</label>:</td>
                <td>
                    <input type="text" id="tswemail" name="email" size="25" />
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <label for="tswcomments">Comments</label>
                    <br />
                    <textarea rows="15" cols="35" name="comments" id="tswcomments"></textarea>
                </td>
            </tr>
            <tr>
                <td align="center" colspan="2">
                    <input type="submit" value="Submit" />
                    <br />
                </td>
            </tr>
        </table>
    </form>
</div>

CSS: http://www.joekellywebdesign.com/churchsample/css/styles.css

/* rules for contact page */

#contactbottomleft {z-index:26; width:450px;height: 700px; background-color:#92B681; margin: 30px 0 0 0; float:left;position: relative;}

#contactbottomright { z-index:27; width:450px; height: 700px; margin: 30px 0 0 0px; background-color:#428C3E; float:right;position: relative;}

form {
    display: inline-block;
    text-align: center;
}

    /* end rules for contact page */ 

Answer 1

您可以为表单设置宽度，然后将 margin: 0 auto; 添加到 CSS。例如:

HTML:

<div>
    <form></form>
</div>

CSS:

form {
    margin: 0 auto;
    width: 300px;
}

注意:要使其正常工作，您必须从 form 中删除 display:inline-block。

JS Fiddle Example (using your HTML/CSS) .