2012-03-19 15 views
0

以下のコードでは、ユーザー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; 
} 

感謝。

答えて

6

あなたはdivの中に入力を追加し、そのdivのためのオートようマージンを設定することで試すことができ

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

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

+0

おかげで多くのことを試してみてください。必要に応じて動作します。 – learner

3

あなたは、代わりにdivの内側に入力タグを置くことができますテキストを整列させる:center;

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

この

関連する問題