Comment centrer les éléments de formulaire d'alignement dans simple_form

Question

Je suis en train de centrer aligner tous les éléments de forme sous une forme construite avec simple_form donc je créé un .simple_form et rempli de certaines choses comme float, text-align, etc au centre de tout, mais il ne fonctionne pas

.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

Donnez display:inline-block à vos balises d'entrée.

Ainsi, CSS sera:

.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 doit être:

<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>