양식을 중심으로 도움이 필요합니다.

Question

글쎄, 지난 시간 동안 이름을위한 양식을 중심으로 검색하고 있었고 여기까지 물어보기로 마음 먹었습니다. 그래, 난 ..이 장소를 검색 한

내 HTML :

<div id="main" class="main"> 
    <table border="0" class="container1"> 
     <tr> 
      <td> 
       <p> 
        <img src="images/doesitfit.png" /> 
       </p> 
      </td> 
     </tr> 
    </table> 
    <table border="0"> 
     <div class="container2"> 
      <input type="text" value="Enter Your First Name" id="form" onblur="javascript:if(this.value=='')this.value='Enter Your First Name';" onclick="javascript:if(this.value=='Enter Your First Name')this.value='';"></input> 
     </div> 
    </table> 
</div> 

내 CSS : 또한

.main { 
    background-color: rgba(11, 11, 11, 0.8); 
    width: 800px; 
    height: 550px; 
    border-radius:15px; 
    -webkit-border-radius: 15px; 
    -moz-border-radius: 15px; 
    margin-left: auto; 
    margin-right: auto; 
    min-height: 10em; 
    height:100%; 
    overflow:hidden; 
} 
.container1 { 
    table-layout: fixed; 
    height:50%; 
    overflow:hidden; 
    width: 802px; 
    border-color:#ff0000; 
    border-radius:15px; 
    -webkit-border-radius: 15px; 
    -moz-border-radius: 15px; 
    margin-left: auto; 
    margin-right: auto; 
    min-height: 10em; 
    color:white; 
    margin: auto; 
} 
.container2 { 
} 
#form { 
    font-size: 19px; 
    border: 0px solid; 
    color: #7a7a7a; 
    height:28px; 
    width:295px; 
    text-align:center; 
    margin: auto; 
} 

, 나는 이메일과 같은 몇 양식 (입력)를 추가 할 계획 , 전화 번호.

대단히 감사합니다. 마침내 도움을 얻을 수 있기를 바랍니다.

Answer 1

입력을 중앙에 배치하는 방법을 보여주기 위해 CodePen을 만들었습니다. <div>를 사용 - 또한 당신이 레이아웃에 <table>를 사용하지한다고 생각 - (http://codepen.io/kevingimbel/pen/BKruj)

여기에 주요 probleme는 입력이 display:block;로 설정되어 margin: 0 auto; wont't 일까지이다.

어쨌든 펜 내부의 CSS에 댓글을 달았습니다. 더 많은 도움이 필요하면이 글을 잠시 보도록하겠습니다. 희망을 도울 수 있기를 바랍니다.

Answer 2

이 시도 :

form { 
margin-left:auto; 
margin-right:auto; 
} 

Answer 3

양식 요소에 입력을 감싸고 CSS에서 양식을하기 전에 # 기호를 잃을

<form> 
    <input type="text" value="Enter Your First Name" onblur="javascript:if(this.value=='')this.value='Enter Your First Name';" onclick="javascript:if(this.value=='Enter Your First Name')this.value='';">></input> 
</form> 


form { 
    font-size: 19px; 
    border: 0 solid; 
    color: #7a7a7a; 
    height: 28px; 
    width: 295px; 
    text-align: center; 
    margin: 0 auto; 
} 

하거나 입력 ID 양식을 보존하려는 경우

<input type="text" value="Enter Your First Name" id="form" onblur="javascript:if(this.value=='')this.value='Enter Your First Name';" onclick="javascript:if(this.value=='Enter Your First Name')this.value='';">></input> 


#form { 
    display: block; 
    font-size: 19px; 
    border: 0 solid; 
    color: #7a7a7a; 
    height: 28px; 
    width: 295px; 
    text-align: center; 
    margin: 0 auto; 
}