在 rails 表单中使用 zurb foundation css 居中按钮

Question

我在 rails 应用程序中使用 zurb foundation css。我无法将表单中的提交按钮居中。按钮总是在左边。

<%= form_for @campaign do |f| %>
    <div class="field">
      <%= f.label :name %>
      <%= f.text_field :name %>
    </div>

    <div class="field">
      <%= f.label :content %>
      <%= f.text_area :content %>
    </div>

    <%= f.submit :class => "button radius success text-center", :value => "Create" %>
<% end %>

必须有一个简单的 class 是我所缺少的。

Answer 1

要使按钮居中，您需要将其包装在具有 text-center class 的元素中。这就是 CSS 和 text-align 属性居中元素的工作原理——它将内联和内联块子元素居中。但不是它自己。

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css" rel="stylesheet"/>
<form>
    <div class="field">
      <label>Name</label>
      <input type="text">
    </div>

    <div class="field">
      <label>Name</label>
      <textarea></textarea>
    </div>

    <div class="text-center">
      <input type="submit" class="button radius success" value="Create">
    </div>
</form>

在 rails 表单中使用 zurb foundation css 居中按钮

Center a button using zurb foundation css in rails form

ruby-on-rails

zurb-foundation