Как центрировать выравнивание элементов формы в simple_form

Question

Я пытаюсь центрировать выравнивание всех элементов формы в форме, построенной с помощью simple_form, поэтому я создал .simple_form и заполнил некоторые вещи, такие как float, text-align и т. Д., Чтобы центрировать все, кроме он не работает

.simple_form { 
    float: none; 
    text-align : center; 
    margin-right: auto; 
    margin-left: auto; 
    position: auto; 
} 
/* 
.simple_form label { 
    float: left; 
    width: 100px; 
    margin: 2px 10px; 
} 

.simple_form div.input { 
    margin-bottom: 10px; 
    margin: 2px 10px; 
} 

.simple_form div.boolean, .simple_form input[type='submit'] { 
    margin-left: 120px; 
    margin: 2px 10px; 
} 

.simple_form div.boolean label { 
    float: none; 
    margin: 0; 
    margin: 2px 10px; 
} 
*/ 

HTML

<h1>Submit page </h1> 
<%= simple_form_for Post.new do |f| %> 
<%= f.input :title %> 
<%= f.input :blurb %> 
<%= f.input :funding_goal %> 
<%= f.input :funding_duration %> 
<%= f.button :submit %> 
<% end %> 

Answer 1

FIDDLE

Дайте display:inline-block к введенным тегам.

Итак, CSS будет:

.simple_form { 
    float: none; 
    text-align : center; 
    border: 1px solid #CCC; 
} 
.simple_form .input-box { 
    margin-bottom: 10px; 
} 
.simple_form input { 
    margin-bottom: 10px; 
    margin: 2px 10px; 
    display: inline-block; 
} 

HTML Должно быть:

<form class="simple_form"> 
    <div class="input-box"> 
    <input type="text" /> 
    </div> 
    <div class="input-box"> 
    <input type="text" /> 
    </div> 
    <div class="input-box"> 
    <input type="text" /> 
    </div> 
    <input type="submit" /> 
</form>