如何用基础居中表格?
How to center a form with foundation?
如下图所示,表单向左移动。我希望它在行内居中(=屏幕中间)。我如何正确地使用粉底做到这一点?
<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 的解决方案
假设您正在使用 Foundation 5:
我很确定,<div class="four columns">
行不通。
试试这个:<div class="small-4 small-centered columns">
尝试一下;
<div class="four columns" style="width:100%;text-align:center">
然后;
<div class="signup-panel" style="text-align:right">
最后是两个输入;
<input style="text-align:left"
希望这对您有所帮助..
如下图所示,表单向左移动。我希望它在行内居中(=屏幕中间)。我如何正确地使用粉底做到这一点?
<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 的解决方案
假设您正在使用 Foundation 5:
我很确定,<div class="four columns">
行不通。
试试这个:<div class="small-4 small-centered columns">
尝试一下;
<div class="four columns" style="width:100%;text-align:center">
然后;
<div class="signup-panel" style="text-align:right">
最后是两个输入;
<input style="text-align:left"
希望这对您有所帮助..