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文件中的元素的arn't這個頁面上使用）。

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沒有解決這個特定的問題，任何人碰到這個未來應該閱讀真相的只使用CSS，而不是表來對齊有關的答案。更好，更簡單的方法來做到這一點。

Answer 1

試試這個：

tr 
{ 
    vertical-align:text-bottom; 
} 

Answer 2

嘗試

<td align=center>name</td> 

Answer 3

它這樣做是因爲在右邊的表格單元格的<p/>標籤的原因。把那些拿出來，如果你想在行之間增加更多的空格，填充樣式到全部表格單元格。

例

td 
{ 
    padding-bottom: 10px; 
} 

Answer 4

你並不需要使用表。使用標籤本身來對齊表單。

See this example