如何使登录框水平和垂直居中?
这是我的结构:
<div class="container">
<div class="row">
<div class="col s12 m6">
<div class="card">
<div class="card-content">
<span class="card-title black-text">Sign In</span>
<form>
<div class="row">
<div class="input-field col s12">
<input placeholder="Placeholder" id="firstname" type="text" class="validate">
<label for="firstname" class="active">First Name</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input placeholder="Placeholder" id="lastname" type="text" class="validate">
<label for="lastname" class="active">Last Name</label>
</div>
</div>
</form>
</div>
<div class="card-action">
<input type="submit" class="btn" value="Sign In">
</div>
</div>
</div>
我尝试使用 valign-wrapper
和 valign
类,但它不起作用。
最佳答案
这是正确的 (materializecss) 方法,没有凌乱的 css:
<div class="valign-wrapper" style="width:100%;height:100%;position: absolute;">
<div class="valign" style="width:100%;">
<div class="container">
<div class="row">
<div class="col s12 m6 offset-m3">
<div class="card">
<div class="card-content">
<span class="card-title black-text">Sign In</span>
<form>
<div class="row">
<div class="input-field col s12">
<input placeholder="Placeholder" id="firstname" type="text" class="validate">
<label for="firstname" class="active">First Name</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input placeholder="Placeholder" id="lastname" type="text" class="validate">
<label for="lastname" class="active">Last Name</label>
</div>
</div>
</form>
</div>
<div class="card-action">
<input type="submit" class="btn" value="Sign In">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
关于html - 物化框架中的水平和垂直对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31854696/