Как центрировать форму с фундаментом?

Question

Как вы можете видеть на изображении ниже, форма сдвигается влево. Я хотел бы, чтобы он был центрирован (= средний экран) внутри строки. Как это сделать правильно с основанием?

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

Answer 1

Предполагая, что вы работаете с Фондом 5::

---

EDIT

Я вполне уверен, что <div class="four columns"> не будет работать.

Попробуйте вместо этого: <div class="small-4 small-centered columns">

Answer 2

Try;

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

Тогда;

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

И, наконец, для обоих входов;

<input style="text-align:left" 

Надеется, что это помогает ..