HTML 양식 입력/레이블 맞춤

Question

간단한 등록 양식을 만들려고합니다. 모든 것을 깔끔하게 맞추기 위해 저는 테이블 메서드를 사용했습니다. 그러나 텍스트가 테이블의 중심에 정렬되지 않고 대신 테이블 아래에 있습니다. 이전에 비슷한 방법을 사용했는데 제대로 작동했습니다.

여기에서 문제를 확인할 수 있습니다. http://www.krawczyksolutions.com/sender/register.php

테이블의 코드는 CSS 파일은 다음 (: CSS 파일의 요소 중 일부는이 페이지에 사용 arn't 주)를 포함

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

입니다. mason81이 특정 문제를 해결했다하더라도

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

이 건너 오는 다른 사람이 그것을 정렬이 아니라 테이블보다 단지 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