таргетинг и центрирование полей загрузочного твитера в форме

Question

У меня есть форма, в которой я хочу, чтобы поля были центрированы в середине страницы. В настоящее время форма почти сосредоточена, но полей нет.

Вот картинка вида. Вы можете видеть, что слово «Старт» центрировано, но формы нет.

Поля формы должны быть центрированы. Как и макет tumblr.

Вот моя разметка на мой взгляд.

<h1 class="center">Start</h1> 
     <form class="create_account" id="login" action="{{ URL::route('account-create-post') }}" method="post"> 
     <div class="input-group input-group-lg"> 
      <div class="form-group"> 


       <br> 
       <input class="form-control input-lg" type='text' name='first_name' required placeholder="First Name"{{ (Input::old('first_name')) ? ' value"' . e(Input::old('first_name')) . '"' : '' }}> 
         <div class="errors"> 

       </div> 
      </div> 
      <div class="form-group"> 

       <br> 
       <input class="form-control input-lg" type='text' name='last_name' required placeholder="Last Name" {{ (Input::old('last_name')) ? ' value"' . e(Input::old('last_name')) . '"' : '' }}> 
         <div class="errors"> 

       </div> 
      </div> 
      <div class="form-group"> 

       <br> 
       <input class="form-control input-lg" type='email' name='email' required placeholder="Email" {{ (Input::old('email')) ? ' value"' . e(Input::old('email')) . '"' : '' }}> 
         <div class="errors"> 

       </div> 
      </div> 
      <div class="form-group"> 

       <br> 
       <input class="form-control input-lg" type='text' name='username' required placeholder="Username" {{ (Input::old('username')) ? ' value"' . e(Input::old('username')) . '"' : '' }}> 
         <div class="errors"> 


       </div> 
      </div> 

      <div class="form-group"> 

       <br> 
       <input class="form-control input-lg" type='password' name='password' required placeholder="Password" /> 
       <div class="errors"> 

       </div> 
      </div> 
      <div class="form-group"> 

       <br> 
       <input class="form-control input-lg" type='password' name='password_again' required placeholder="Confirm Password" /> 
       <div class="errors"> 

       </div> 
      </div> 

      <input class="btn btn-primary btn-block" type="submit" value="Start Apologizing"> 
      <!-- pass token related to session-protects against csrf --> 
      {{ Form::token() }} 
     </form> 

Вот мой CSS

.create_account { 
width: 400px; 
height: auto; 
margin: 0 auto; 
text-align: center; 
} 

.create_account input { 
width: 80%; 
height: auto; 
margin: 0 auto; 
} 

Answer 1

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

.input-group {width:80%; margin:0 auto;} 
.create_account input {width:100%} 

jsfiddle

Он имеет input расширить полную ширину родителя, в этом случае, .input-group который установлен на 80%, я предполагаю, что вы хотели.