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-blockform.

JS Fiddle 示例(使用您的 HTML/CSS)

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

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

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