позиционирование поля ввода текста в центре - PullRequest
Новая
       2

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

0 голосов
/ 20 марта 2012

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

Заранее спасибо.

Ответы [ 2 ]

6 голосов
/ 20 марта 2012

Вы можете попытаться, добавив вход в div и установив поле как auto для этого div 

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

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

4 голосов
/ 20 марта 2012

Вы также можете поместить тег ввода в элемент div и задать text-align: center; 

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

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

...