HTML表单输入/标签对齐

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

UPDATE

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

Answer 1

试试这个:

tr
{
  vertical-align:text-bottom;
}

Answer 2

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

看这个例子