Центральные поля ввода в форме

У меня есть форма входа в систему, которая находится в центре страницы. FORM уже в нужном месте с нужным размером. Однако два входа выравниваются влево, и я хочу, чтобы они были центрированы. Следующий код не работает. Есть идеи?Центральные поля ввода в форме

HTML

<div class="col-sm-4 col-sm-offset-4"> 
     <form action="/new" method="POST"> 
     <input class="loginField" type="text" name="email" placeholder="Email address"></input> 
     <input class="loginField" type="text" name="password" placeholder="Password"></input> 
     </form> 
    </div>

CSS

.loginField { 
    margin: 0 auto; 
    width: 500px; 
    height: 50px; 
}

источник

2015-10-01 Arturo

Вы должны использовать класс form-control, чтобы изменить поведение по умолчанию для входов Bootstrap.

* Я изменил ваш HTML, так что сначала мобильный, это не повлияет на центрирование текста, если это не нужно для ваших нужд.

body { 
 
    padding-top: 50px; 
 
} 
 
#loginForm { 
 
    max-width: 500px; 
 
    margin: 0 auto; 
 
} 
 
#loginForm .form-control { 
 
    position: relative; 
 
    height: 50px; 
 
    font-size: 16px; 
 
    text-align: center; 
 
    border-radius: 0; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <form id="loginForm"> 
 
    <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus> 
 
    <input type="password" id="inputPassword" class="form-control" placeholder="Password" required> 
 
    </form> 
 
</div> 
 
<!-- /container --> 
 
<hr>

источник

2015-10-01 23:27:35 vanburen

class="text-center" Добавить в форму

<form class="text-center" action="/new" method="POST">

jsBin demo

Логически, если вы не хотите текст все вашей формы, чтобы быть в центре, обернуть входы внутри т.е: <div> и добавить класс к тому, что вместо DIV.

источник

2015-10-01 23:00:27

Центральные поля ввода в форме

ответ

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