Question

我试图创建一个简单的注册表单。为了整齐地对齐所有内容，我使用了表格方法。但是，文本没有在表格的中心对齐，而是在表格的下方。我之前使用过类似的方法，但它工作得很好。

您可以在此处查看问题。 http://www.krawczyksolutions.com/sender/register.php

该表的代码是

<div class="head" align="center">
    <div align="center" class="box">
        <h2>Register New Account</h2><p/>
        <form name="regform" action="javascript:checkForm();">
            <table>
                <tr>
                    <td>First Name:   </td>
                    <td><input type="text" name="fname" class="input" size="30" /><p/></td>
                </tr>
                <tr>
                    <td>Last Name:   </td>
                    <td><input type="text" name="lname"  class="input" size="30"/><p/></td>
                </tr>
                <tr>
                    <td>Company:   </td>
                    <td><input type="text" name="comp"  class="input" size="30"/><p/></td>
                </tr>
                <tr>
                    <td>Address Line 1:   </td>
                    <td><input type="text" name="add1" class="input" size="30" /><p/></td>
                </tr>
                <tr>
                    <td>Address Line 2:   </td>
                    <td><input type="text" name="add2" class="input" size="30" /><p/></td>
                </tr>
                <tr>
                    <td>City:   </td>
                    <td><input type="text" name="city" class="input" size="30" /><p/></td>
                </tr>
                <tr>
                    <td>Postcode:   </td>
                    <td><input type="text" name="post" class="input" size="30" /><p/></td>
                </tr>
                <tr>
                    <td>Country:   </td>
                    <td><input type="text" name="countr" class="input" size="30" /><p/></td>
                </tr>
                <tr>
                    <td>Email:   </td>
                    <td><input type="text" name="email" class="input" size="30" /><p/></td>
                </tr>
                <tr>
                    <td>Confirm Email:   </td>
                    <td><input type="text" name="cemail" class="input" size="30" /><p/></td>
                </tr>
                <tr>
                    <td>Password:   </td>
                    <td><input type="password" name="pass" class="input" size="30" /><p/></td>
                </tr>
                <tr>
                    <td>Confirm Password:   </td>
                    <td><input type="password" name="cpass" class="input" size="30" /><p/></td>
                </tr>
            </table>
            <input type="submit" value="Proceed To Payment"/><p/>
        </form>
    </div>
</div>

CSS文件包含以下内容（注意：此页面上使用的CSS文件中的某些元素）。

body
{
    background-image:url("img/backgr.jpg");
    color:#9E9E9E;
    font-family:Optima, ‘Lucida Grande’, ‘Lucida Sans Unicode’, Verdana, Helvetica, Arial, sans-serif;
}
#header 
{
    margin: 20px;
    padding: 10px;
    height: 60px;
}
#footer
{
    margin: 20px;
    padding: 10px;
    height: 60px;
}
#leftcol
{
    position: absolute;
    left: 150px;
    top: 160px;
    width:400px;
}
#rightcol 
{
    position: absolute;
    right: 150px;
    top: 220px;
    width: 300px;
}
.inputbox
{
    background-color:black;
    color:#9E9E9E;
    font-family:Optima, ‘Lucida Grande’, ‘Lucida Sans Unicode’, Verdana, Helvetica, Arial, sans-serif;
    box-shadow:1px;
    border-radius:3px;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
}
.box {width:700px;padding:15px;background-color:#fff;margin-bottom:18px;border-radius:0.6em;-moz-border-radius:0.6em;-webkit-border-radius:0.6em;}
.box {
    -moz-box-shadow: 4px 4px 5px #111;
    -webkit-box-shadow: 4px 4px 5px #111;
    box-shadow: 4px 4px 5px #111;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#111111')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#111111');
}
.head
{
    margin-top:50px;
}
.input
{
    font-size:14px;
}

更新

尽管mason81确实解决了这个特殊问题，但其他任何人都应该阅读Truth关于仅使用CSS而不是使用表来对齐它的答案。更好更容易的方法。

Answer 1

试试这个：

tr
{
  vertical-align:text-bottom;
}

Answer 2

您不需要使用表格。使用标签本身来对齐表单。

<强> See this example

Answer 3

它之所以这样做是因为右侧表格单元格中的<p/>标签。把它们取出来，如果你想在行之间留出更多的空间，可以在 all 表格单元格中添加填充样式。

实施例

td
{
   padding-bottom: 10px;
}

Answer 4

尝试

<td align=center>name</td>

HTML表单输入/标签对齐

4 个答案: