如何在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

小提琴

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