Элементы ввода формы не центрированы - PullRequest
Новая
       0

Элементы ввода формы не центрированы

11 голосов
/ 07 июля 2011

Здесь я рассмотрел несколько разных ответов, и все они, похоже, сводятся к выравниванию текста: центр в стиле родительского div.Я пробовал это, и это работает для меток, но не для реальных элементов ввода.

JSFiddle

Вот основной код:

html 

<div id="content"> 
  <div id="login_form"> 
    <h2>Log in to DOT Voting</h2> 
    <form>
        <label for="username">Username</label>
        <input type="text" name="username" value=""  />
        <label for="password">Password</label>
        <input type="password" name="password" value=""  />
        <input type="submit" name="submit" value="Log In"  />
  </div>     
</div>

css

#login_form {
    width:90%;
    background-color: #bdd2ff;
    border: 1px solid white;
    margin: 50px auto 0;
    padding: 1em;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    text-align: center;
}

input[type=text], input[type=password] {
    text-align:center;
    display: block;
    margin: 0 0 1em 0;
    width: 90%; 
    border: 1px solid #818181;
    padding: 5px;
}

input[type=submit] , form a {
    border: none;
    margin-right: 1em;
    padding: 6px;
    text-decoration: none;
    font-size: 12px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    background: #cfdeff;
    color: black;
    box-shadow: 0 1px 0 white;
    -moz-box-shadow: 0 1px 0 white;
    -webkit-box-shadow: 0 1px 0 white;
}

input[type=submit]:hover, form a:hover {
    background: #007cc2;
    cursor: pointer;
}

Элемент login_form div центрируется на странице, метки форм - центрированы в div, а кнопка отправки - центрирована в div.Но поля ввода текста не центрированы.Что я могу сделать, чтобы заставить их сосредоточиться?(Мне все равно, центрируется ли содержимое полей ввода; я просто хочу, чтобы сами блоки центрировались в div.)

Ответы [ 4 ]

23 голосов
/ 07 июля 2011

Добавить 

margin: auto;

в ваш input[type=text], input[type=password] класс.

Также обязательно удалите атрибут text-align: center;, поскольку это приводит к центрированию текста на входе.

JSFiddle

2 голосов
/ 07 июля 2011

text-align не работает на элементах блока. Удалите display:block на input[type=text], input[type=password] или измените его на display:inline-block. Обратите внимание, что встроенный блок не работает для

Или, поскольку у вас есть ширина, объявленная на входе, вы можете удалить text-align:center и использовать margin: 0 auto 1em auto;

2 голосов
/ 07 июля 2011

Измените объявление margin для элементов input, чтобы использовать auto для margin-left и margin-right: 

#login_form {
    width:90%;
    background-color: #bdd2ff;
    border: 1px solid white;
    margin: 50px auto 0;
    padding: 1em;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    text-align: center;
}

input[type=text], input[type=password] {
    text-align:center;
    display: block;
    margin: 0 auto 1em auto;
    width: 90%;  /*280px;*/
    border: 1px solid #818181;
  /*  -moz-border-radius: 1px;
    -webkit-border-radius: 1px; */
    padding: 5px;
}

input[type=submit] , form a {
    border: none;
    margin-right: auto;
    margin-left: auto;
    padding: 6px;
    text-decoration: none;
    font-size: 12px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    background: #cfdeff;
    color: black;
    box-shadow: 0 1px 0 white;
    -moz-box-shadow: 0 1px 0 white;
    -webkit-box-shadow: 0 1px 0 white;
}

input[type=submit]:hover, form a:hover {
    background: #007cc2;
    cursor: pointer;
}

Обновлено JS Fiddle .

0 голосов
/ 07 июля 2011

Центрируется на основе 90% -ного значения input [type = text], input [type = password] css. Вы можете определить это с фиксированной шириной, или для жидкостных макетов, установить его на 100% ширину и настроить его поле.

...