如何將表單與基礎對齊？

正如您在下面的圖片中看到的，窗體向左移動。我希望它在行內居中（=屏幕中間）。我如何正確地做到這一點與基礎？如何將表單與基礎對齊？

<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的解決方案

來源

2015-12-18 rottenoats

請提供的css太..或創建一個小提琴演示。 –

假設你與基金會工作5：

我敢肯定，這<div class="four columns">將無法正常工作。

試試這個：<div class="small-4 small-centered columns">

來源

2015-12-18 09:15:50 phortx

這不起作用。我會將結果添加到我的問題中。正如你所看到的，元素在窗體中居中，但窗體不在該行內居中。 – rottenoats

檢查[this]（http://codepen.io/Nerd/pen/WrwEqq）它爲我工作。 – Nerdkowski

@Nerdkowski我必須一直在與不同版本的基金會合作。我切換到5，它的工作原理。謝謝。 – rottenoats

嘗試;

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

然後;

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

最後對於兩個輸入;

<input style="text-align:left"

希望這有助於..

來源

2015-12-18 09:32:53

如何將表單與基礎對齊？

回答

相關問題