Menu
How can I center the login box both horizontal and vertical?
Here is my structure:
<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>
I tried using valign-wrapper and valign class but it does not work.
995
Vertical alignment is when teachers who teach the same content area meet across grade level bands. Horizontal alignment is when teachers at the same grade level meet to coordinate learning activities.
Vertical Align You can easily vertically center things by adding the class valign-wrapper to the container holding the items you want to vertically align.
Vertical alignment can be defined as the alignment of a pipe in the vertical direction with respect to the proposed plan. Pipe alignment should not vary more than 2 inches in the vertical direction and not more than 6 inches in the horizontal direction.
use margin-top, margin-bottom to align the box at center.
Here is the proper (materializecss) way to do it and without messy 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>
Simply use offset to align. Offset the card view by half of what's left.
<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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
