입력 텍스트 상자를 중앙에 배치

아래 코드에서 사용자 ID 상자를 중앙에 배치해야합니다. 나는 많은 시도 후에 이것을 할 수 없었다. 너무 순진한 것에 대해 유감스럽게 생각합니다. 다음과 같이
내 HTML 및 CSS 파일은 다음과 같이입력 텍스트 상자를 중앙에 배치

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<head> 
<link rel="stylesheet" type="text/css" href="styledel.css" /> 
</head> 

<body> 
<input type="text" name="userid" id="userid"> <!-- this need to go in the center --> 
<br/><br/><br/> 


<form action="http://localhost" method="post" name="form""> 
     <label for="name">Name</label> 
       <input type="text" id="name" name="name" disabled="disabled" /> 
       <br></br> 

       <label for="email">E - mail</label> 
       <input type="text" name="email"> 
       <br></br> 

       <label for="password">Select Password</label>     
       <input type="password" name="password" > 
       <br></br> 

       <label for="password2">Retype Password</label> 
       <input type="password" name="password2" > 
       <br></br> 
    <input type="submit" value="Submit" /> 
</form> 

</body> 
</html>

내 CSS 파일은 다음과 같습니다
styledel.css 사전에

* { 
    margin: 0; 
    padding: 0; 
} 

body { 
    font-family: Helvetica, sans-serif; 
    } 

#page-wrap { /*showing white background*/ 
    width: 600px; 
    background: white; 
    padding: 20px 50px 20px 50px; 
    margin: 20px auto; 
    min-height: 500px; 
    height: auto !important; 
    height: 500px; 
} 

form, br { 
    clear: left; 
    margin: 0; 
    padding: 0; 
} 

input.form_element { 
    width: 221px; 
    background: transparent url('bg.jpg') no-repeat; 
    color : #747862; 
    height:20px; 
    border:0; 
    padding:4px 8px; 
    margin-bottom:0px; 
} 

.checkun{ 
    width: 150px; 
    background: transparent url('bg.jpg') no-repeat; 
    color : #747862; 
    height:20px; 
    border:1px solid blue; 
    padding:4px 10px; 
    margin-bottom:0px; 
    position: right; 
} 

label, input { 
    width: 160px; 
    float: left; 
    font: 11px bold Tahoma, Arial, sans-serif; 
    margin: 1px; 
    padding: 2px; 
} 

label { 
    font: 14px bold Tahoma, Arial, sans-serif; 
    background: #eeeeee; 
} 

input { 
    width: 200px; 
    padding: 2px; 
    border: 1px solid #aaa; 
}

감사합니다.

출처

2012-03-19 learner

당신은 사업부의 입력을 추가하고 해당 사업부에 대한 자동으로 여백을 설정하여 시도 할 수 있습니다

#user-id-div 
{ 
width:200px; 
margin:auto;  
}

예 : http://jsfiddle.net/R3quk/4/

출처

2012-03-19 22:40:54 Kaushtuv

감사를 사용해보십시오. 원하는대로 작동합니다. – learner

당신은 대안 DIV 안에 입력 태그를 넣을 수 있습니다 줄 텍스트 줄 맞춤 : 센터;

<div style="text-align:center;"><input type="text" name="userid" id="userid"></div>

은 많은이

출처

2012-03-20 10:27:02 webdevexp

입력 텍스트 상자를 중앙에 배치

답변

관련 문제