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