如何使表格与基础居中？答案

【问题标题】：How to center a form with foundation?如何使表格与基础居中？
【发布时间】：2015-12-19 15:31:14
【问题描述】：

如下图所示，表单向左移动。我希望它在行内居中（=屏幕中间）。我该如何正确使用粉底？

<section class="section_light">
    <div class="row">
        <div class="four columns">
          <div class="signup-panel">
            <h4 class="welcome">Login</h4>
            <form data-abide method="post" action="connection" id="form_login">
              <div class="row collapse">
                <div class="small-12  columns">
                  <input name="username" type="text" placeholder="Username" required>
                </div>
              </div>
              <div class="row collapse">
                <div class="small-12 columns ">
                  <input name="password" type="password" placeholder="Password" required>
                </div>
            </div>
            <input type="submit" class="round button" value="Login"/>
        </form>
      </div>
    </div>
   </div>
</section>

我一直在玩html，但没有任何成功。

编辑：phortx 的解决方案

【问题讨论】：

请也提供 css .. 或创建一个小提琴演示。

标签： html css zurb-foundation zurb-foundation-5

【解决方案1】：

假设您正在使用 Foundation 5：

我很确定，<div class="four columns"> 不起作用。

试试这个：<div class="small-4 small-centered columns">

【讨论】：

不幸的是，这不起作用。我会将结果添加到我的问题中。如您所见，元素在表单内居中，但表单不在行内居中。
@Nerdkowski 我一定是在使用不同版本的 Foundation。我切换到 5 并且它工作。谢谢。
在我的 codepen 中，我使用了 5.5 版。我很高兴能帮上忙。
我已经删除了我的 codepen。 Here你在 jsfiddle 中得到了答案。

【解决方案2】：

试试；

<div class="four columns" style="width:100%;text-align:center">

那么;

<div class="signup-panel" style="text-align:right">

最后是两个输入；

<input style="text-align:left"

希望这会有所帮助..

【讨论】：