【问题标题】：How to center align form elements in simple_form如何在 simple_form 中居中对齐表单元素
【发布时间】：2014-08-28 08:27:13
【问题描述】：

我正在尝试将使用 simple_form 构建的表单中的所有表单元素居中对齐，因此我创建了一个 .simple_form 并填充了浮动、文本对齐等某些内容以使所有内容居中，但它不起作用

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

【问题讨论】：

使用标签，但它在 HTML 5 中不受支持。
生成的 HTML 是什么？
你有一个工作的例子吗？或jsfiddle.net 与您的代码？ position:auto 也不是有效的 CSS 样式。您可能需要将样式应用到它的父容器才能使其工作
请给我们一个jsfiddle，以便我们可以看到html和css代码工作
我已经用 html 中的表单更新了代码，我试图将其元素居中对齐

标签： html css forms ruby-on-rails-4 erb

【解决方案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>

【讨论】：