2

我在 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 */
4

2 回答 2

4

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

HTML：

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

CSS：

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

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

JS Fiddle 示例（使用您的 HTML/CSS）。

于 2013-10-01T15:15:42.930 回答
0

您必须设置祖先元素的宽度，然后添加margin:0 auto到其子元素。看演示

于 2013-10-01T15:21:56.477 回答