позиционирование текстового поля ввода в центре

В приведенном ниже коде мне нужно поместить ящик пользователя в центр. Я не мог этого сделать после многих попыток. Извините за то, что так наивно.
Мой 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

Вы можете попробовать, добавив вход в DIV и настройка поля, как авто для этого DIV

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

Пример: http://jsfiddle.net/R3quk/4/

источник

2012-03-19 22:40:54 Kaushtuv

Спасибо много. Работает по желанию. – learner

Вы можете альтернативно поместить входной тег внутри DIV и дать text-align: center;

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

Попробуйте это

источник

2012-03-20 10:27:02 webdevexp

позиционирование текстового поля ввода в центре

ответ

Смежные вопросы