Horizontal and vertical alignment in materialize framework
58,744
Solution 1
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>
Solution 2
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>
Solution 3
Try to this solution, I hope it can help you
.card {
position: absolute;
left: 50%;
top: 50%;
-moz-transform: translate(-50%, -50%)
-webkit-transform: translate(-50%, -50%)
-ms-transform: translate(-50%, -50%)
-o-transform: translate(-50%, -50%)
transform: translate(-50%, -50%);
}
Also you can try
body (or container-div) {
display: flex;
align-items: center;
justify-content: center;
}
Author by
Ordidaad
Updated on July 09, 2022Comments
-
Ordidaad almost 2 years
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
andvalign
class but it does not work.