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;
}

注意：为此，您必须从display:inline-block删除form。

JS Fiddle Example (using your HTML/CSS)

Answer 2

您必须设置Ancestor元素的宽度，然后将margin:0 auto添加到其子项。见demo

将表单置于div中

2 个答案: